为什么非浮动 div 覆盖/重叠浮动 div？（以“为什么”为重点）答案

【问题标题】：Why does an unfloated div cover/overlap a floated div? (with "why" being the focus)为什么非浮动 div 覆盖/重叠浮动 div？（以“为什么”为重点）
【发布时间】：2016-03-25 02:46:09
【问题描述】：

我的问题与当您有一个 div 浮动 (float:left) 和一个未浮动的 div 之后有关。在那种情况下，为什么未浮动的 div 会覆盖并重叠第一个 div？就像第一个浮动 div 被从流中取出（如绝对定位），第二个非浮动 div 如何越过第一个 div。

我知道第二个非浮动 div 中的文本不会这样做。它似乎知道第一个 div 并漂浮在它旁边。

我也知道解决方法是让第二个 div 也向左浮动。

我的问题是为什么。为什么第二个未浮动的 div（可能包含在其中的任何文本除外）覆盖并重叠了第一个浮动的 div？

在 Stack Overflow 上的另一个类似问题中，有人说“float 从正常流程中删除了一个元素，这意味着相邻元素的定位就像浮动不存在一样......如果一个元素不是这种情况有一个内嵌显示。”所以我的问题是 为什么 是从正常流程中删除的浮动元素（内联元素除外）？我理解为什么内联元素会出现这种情况（例如，您希望将文本刷新到浮动 div 以围绕图像自动换行）。但为什么它完全从正常流程中删除？？？

这里有一些代码来说明我的意思。

.box1 {
  border: solid 3px;
  width: 350px;
  float: left;
  height: 100px;
}
.box2 {
  background-color: lightblue;
  width: 400px;
  height: 150px;
  border: blue solid 3px;
}

<div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

【问题讨论】：

是什么让你认为第二个 div 覆盖了浮动 div？你给浮动的 div 设置了背景色吗？
为什么？因为这就是定义浮动行为的方式。如果不将其从正常流程中移除，则无法实现其目的，即将自身定位在其容器的左侧或右侧。其他元素（如果有的话）会阻碍。

标签： css css-float

【解决方案1】：

就像第一个，浮动的div被从流中取出

没错，就是这个原因。浮动元素是out-of-flow:

如果一个元素是浮动的，那么它就被称为非流动，绝对定位，或者是根元素。

鉴于floats 的行为，这是必要的：

浮点数是在当前行向左或向右移动的框。

如果它们没有从正常流程中移除，它们会在移动之前继续占据其初始位置的一些空间。

注意内联浮点数也不例外，因为没有这样的东西。按照Relationships between 'display', 'position', and 'float'

中的说明，浮动被阻塞

因此，float 后面的块会与它重叠：

由于浮动不在流中，因此创建了非定位块框前后浮动框垂直流动，好像浮动没有存在。但是，在旁边创建的当前和后续行框浮动会根据需要缩短以为边距框腾出空间浮动。

您可以通过建立新的块格式化上下文来防止这种行为：

表格的边框框、块级替换元素或正常流程中建立新block formatting context 的元素（例如具有“溢出”而不是“可见”的元素）不得与同一块中任何浮动的边距框重叠将上下文格式化为元素本身。如有必要，实现应该通过将其放在任何下方来清除所述元素前面的花车，但如果有足够的空间。

.box1 {
  border: solid 3px;
  width: 350px;
  float: left;
  height: 100px;
}
.box2 {
  background-color: lightblue;
  width: 400px;
  height: 150px;
  border: blue solid 3px;
  overflow: hidden; /* Establish BFC */
}

<div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

【讨论】：