为什么浮动的 div 会导致下一个 div 占据整个空间？

Question

我知道float属性可以让元素部分脱离正常流。但令我惊讶的是，在一个浮动div后面的下一个div也会占用该浮动div的空间。例如：

.header {
  float: left;
  height: 100px;
  width: 100%;
  background: green;
  padding: 10px;
  background-clip: content-box;
}

.footer {
  background: yellow;
  border: 1px dotted red;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">HEADER</div>
  <div class="footer">FOOTER is yellow with red border</div>
</div>

这里黄色的页脚在绿色的页眉之后，但它的行为方式就像它是页眉的容器。边框超出了页眉和页脚。原则上，页脚只应该绘制自身周围的边框。这种行为的原因是什么？

另一个惊喜是绿色背景遮盖了黄色背景。这就是层叠顺序的工作方式吗？在 html 中后面的 div 在层叠顺序中处于前面的 div 下方，这正常吗？

请提供相关参考来解释这些行为。

- user31782

---

只是因为你浮动了标题，所以它看起来像是包含在页脚中。在你的示例中删除不必要的属性，如宽度、高度、填充，并在两个div之间放置一些内容，你会发现页脚向下移动，而标题并没有被包含在其中。 - j08691

在这种情况下，我将放置的内容将充当标题的容器。我认为这就是浮动工作的方式；对于非浮动元素，浮动div的内容存在，但浮动div本身不存在。 - user31782

另外，我认为在 footer 上使用 clear 属性会将其向下推，因为它会让 footer 认为前面的浮动元素现在处于流动状态。 - user31782

Answer 1

这种行为的发生是因为，如你所说，浮动元素被取出了流，所以它们旁边的元素会上升并占据它们的空间。但是浮动元素只被部分地取出了流。部分地，意味着它们旁边的元素忽略了它们，就好像它们不再处于流中一样，但是它们内部的内容仍然尊重这些浮动元素，因此会被水平或垂直地推动。

你可以把浮动元素想象成漂浮在其他元素之上。此外，其他元素的内容也被提升到它们之上。因此，它们的平面（或背景颜色）在浮动元素下方，但内容向下（或水平）推动。

关于你的特定情况，你应该记住，浮动元素旁边的元素总是占据浮动元素的空间。在你的演示中，似乎有点混淆，因为你的浮动元素的宽度设置为100%，这导致下一个元素的内容不仅水平上而且垂直下被推开。希望这有意义？

类比

作为类比，你可以把所有的HTML元素都看作是1厘米厚的木板，上面放着一些厚的字母块。有点像下面这张图片：

现在假设您有两个这样的元素，第一个是带有字母HEADER的标题，下面是带有字母FOOTER的页脚。

当您将float: left应用于标题元素时，它会上升1厘米并向页面左边界浮动。现在，由于它与其下一个元素不平齐，其下一个元素会尽可能地上升并向左移动。但是，由于浮动元素仅上升了1厘米，因此下一个元素的底部木板上升，而所有字母都被浮动元素推下来。

- Mohit Bhardwaj