相邻元素实际上如何围绕浮动元素工作？ CSS答案

【问题标题】：How do adjacent elements actually work around floated elements? CSS相邻元素实际上如何围绕浮动元素工作？ CSS
【发布时间】：2018-07-01 11:28:35
【问题描述】：

从 CSS 规范中，我可以收集到：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。

所以这意味着浮动元素周围的任何非定位、非浮动相邻元素都应该表现得好像浮动元素不存在一样，对吧？如果前一个元素没有内容，它会完美运行。但是一旦它有一些文本，文本就会出现在浮动元素下方，它不应该并且应该移动到浮动元素下方。

<head>
  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    width: 40%;
  }
  div {
    padding: 2px;
    background-color: brown;
  }
  section {
    margin-left: 5px;
    padding: 2px;
    background-color: dodgerblue;
  }
  </style>
</head>
<body>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <div id="right">
    FOOBAR
  </div>
</body>

这里文本“FOOBAR”出现在浮动部分的下方，并且不会移动到下方。即使我们删除了 FOOBAR div 的宽度，它也会出现在浮动元素的右侧，而不是在其下方。

相邻元素实际上是如何围绕浮动元素工作的。我尝试了很多视频，但似乎没有一个可以解释它。

【问题讨论】：

看看这个，可能会帮助你理解，情况差不多：stackoverflow.com/questions/50888762/floating-elements-behavior/…
附带说明，如果您删除宽度，它也将出现在 ... 为浮动元素添加不透明度，您将看到
@TemaniAfif 所以'div'中的文本和内联元素总是会环绕，而div的其余部分将被推到浮动部分下？此外，哪些元素（一个示例）不会环绕而只会被推到浮动部分下？
是的，几乎是这样......每个文本、内联元素和内联块元素都会环绕浮动......所以基本上任何没有文本、内联块或图像的元素都将放在浮动下面。 . 所以我会说空块元素或只包含块元素的块元素
检查这个：jsfiddle.net/34gdo98t/3

标签： html css css-float

【解决方案1】：

                                  YOUR ANSWER

浮动元素永远不会与内联元素重叠，这就是浮动元素下方不显示 FOOBAR 的原因。这是因为浮动元素最初是为了提供文字环绕图像而不是重叠的效果而发明的。

                   WHY AND HOW THINGS ARE DISPLAYED IN YOUR EXAMPLE ?

每个文本都在 css 中的 line box 内。根据 css 规范，浮动元素可能位于容器边缘和线框边缘之间。在这种情况下，行框将在其中容纳尽可能多的单词，并产生文本包裹浮动元素的效果。在您的情况下，FOOBAR 的行框不能在其中容纳 FOOBAR，除了浮动元素导致没有空间。所以线框在浮动元素下方分解，因此 FOOBAR 显示在浮动下方的线框内。 -

【讨论】：