时间戳

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

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

问题描述

.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>

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

规格说：

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

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

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

起初我以为是因为浮动框接触了块框内的行框，但是如果增加块框的高度或边距，浮动框仍然会接触底部边缘。

标签： htmlcss

解决方案

考虑文档流的垂直进展将回答您的问题。

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

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

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

然后，在此元素完成显示自身（在流中）后，垂直流中的下一个元素是.left-box.

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

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

在您的第一个示例中，.center 也从垂直文档流中的第一个可用点开始......但是，相比之下，这个第一个可用点不低于.left-box开始的位置。

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

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

推荐阅读