如果浮动元素在 HTML 结构中定义在块元素之后，为什么它们不会与块元素重叠？

Question

.left-box {
  background-color: green;
  float: left;
  padding:10px;
}


.center {
  background-color: lightcoral;
}

    <div class="left-box">left box</div>
 
    <div class="center">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
    </div>

在这个例子中，浮动框是在 HTML 结构中的块框之前定义的，并且正如预期的那样，它与块框重叠。

但是，如果浮动框是在块框之后定义的...

.left-box {
  background-color: green;
  float: left;
  padding:10px;
}


.center {
  background-color: lightcoral;
}

    <div class="center">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
    </div>

    <div class="left-box">left box</div>

..现在浮动框不与块框重叠，而是接触其底部边缘。为什么？不应该将浮动框从正常流程中取出并移动到左侧直到它接触到容器或另一个浮动框的边缘吗？

规格说明：

浮动框向左或向右移动直到其外边缘 触及包含块的边缘或另一个浮动的外边缘。 如果有line box，浮动框的外顶对齐 与当前行框的顶部。 [...]

由于浮动不在流中，因此创建了非定位块框 前后浮动框垂直流动，好像浮动没有 存在。

但事实并非如此，不是吗？浮动盒不接触另一个浮动或容器的外边缘，它接触块盒的外边缘。并且，未定位的块盒是在浮动盒之前创建的，然而，对于浮动盒，块盒显然存在。为什么？我错过了什么吗？

一开始我以为是浮动框碰到了块框里面的行框，但是如果你增加块框的高度或边距，浮动框仍然会碰到底部边缘。

Answer 1

考虑文档流的纵向进展将回答您的问题。

在您的第二个示例中，尽管未在 CSS 中说明，.center 具有 <div> 的默认定位和默认显示：

.center {
  position: static;              // by default
  display: block;                // by default
  background-color: lightcoral;
}

这意味着它完成了在垂直流中显示自己，作为一个静态定位的块级实体。

然后，在这个元素完成展示自己（在流中），垂直流中的下一个元素是.left-box。

.left-box 开始在垂直文档流中的第一个可用点显示自己。

但.left-box 的顶部不能高于.center 的底部，因为后者已经完成了在垂直文档流中的定位和显示。

---

在您的第一个示例中，.center also 从垂直文档流中的第一个可用点开始......但相比之下，第一个可用点不低于 @987654330 的位置@ 开始。

为什么不呢？因为，作为浮动元素，.left-box不存在垂直文档流。

这意味着.center 基本上可以忽略.left-box 并在垂直文档流中精确地显示它自己，如果.left-box 不存在，它本来会显示的位置。