为什么“float-start”和“float-end”会断开我的<span>元素与 div 的连接？</span>

Question

我正在运行 reactjs 并尝试将float-start和float-end分别用于div左侧和右侧的 position “开始”和“结束” span元素。

我把它归结为这个基本演示：

index.js ：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div className="my-red-container">
      <span>things</span>
    </div>

    <div className="my-yellow-container">
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>
  </React.StrictMode>
);

index.css ：

.my-yellow-container {
  background-color: yellow;
}

.my-red-container {
  background-color: red;
}

当我使用npm start运行时，我希望看到一个红色条表示“事物”，然后是一个黄色条表示左侧的“左”和右侧的“右”。 相反，我得到这个：

如果我像这样将红色 div 移动到黄色 div 下面：

    <div className="my-yellow-container">
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>

    <div className="my-red-container">
      <span>things</span>
    </div>

然后我希望得到一个黄色的条，左边是“左”，右边是“右”，下面是一个红色的条，上面写着“东西”。 相反，我得到这个：

但是当我向黄色 div 添加一个“未分类” span时，如下所示：

    <div className="my-yellow-container">
      <span>far left</span>
      <span className='float-start'>left</span>
      <span className='float-end'>right</span>
    </div>

    <div className="my-red-container">
      <span>things</span>
    </div>

然后我得到这个：

这就像float-start和float-end完全断开了span与其包含的div的连接，然后所有文本都变得混乱了。

请帮忙。 我搞砸了什么？ 我显然忽略了一些东西，但我不知道是什么。

Answer 1

float 属性用于指定元素应如何在其父元素中浮动。 当您将 float 属性应用于元素时，该元素将脱离文档的正常流动并移动到其父元素的左侧或右侧。 这可能会导致其他元素表现得好像浮动元素不存在一样，就好像该元素不占用任何空间一样。

float 属性的 float-start 和 float-end 值用于指定元素应浮动到父元素的哪一侧。 float-start 值在从左到右的语言中将元素浮动到左侧，而 float-end 值在从左到右的语言中将元素浮动到右侧。

如果您已将 float 属性应用于 span 元素并导致元素与父 div 断开连接，则可能是因为 div 元素没有设置宽度并且无法包含浮动元素。 您可以通过为 div 元素设置宽度或将 overflow: hidden 属性应用于 div 元素以包含浮动元素来解决此问题。

浮动属性也可能导致 span 元素与页面上的其他元素重叠，这可能导致它看起来与 div 断开连接。 在这种情况下，您可以尝试将 clear 属性应用于 div 元素，以防止它与浮动元素重叠。

下面是一个代码示例

<style>
  .floated-element {
    float: float-start; /* or float-end */
  }
  .containing-element {
    width: 500px;
  }
</style>

<div class="containing-element">
  <span class="floated-element">This element will be floated to the left (or right) within the containing element</span>
</div>

在此示例中，将 float 属性应用于值为 float-start 的 span 元素，这将使该元素在从左到右的语言中向左浮动。 包含元素的 div 设置了 500 像素的宽度，它将包含浮动元素。

如果您想改为将元素浮动到右侧，则可以为 float 属性使用值 float-end。

我希望这有帮助。 如果您有任何问题或需要进一步说明，请告诉我。

Answer 2

从以前的答案（在我将其标记为答案之前以某种方式被删除）发现我必须将包含的div设置为此：

<div style={{ overflow: "hidden" }}>
...
</div>

这似乎可以解决问题。 这篇（现已删除）的帖子解释说，“浮动”有意断开浮动子项与父项的尺寸限制的连接，但设置样式overflow: "hidden"会迫使它们再次进入收容状态。 我只想要float-start和float-end的“最左端”和“最右端”特性，所以我很好地强制它的子元素再次回到包含中。