浮动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是否正常？

请参考解释行为。

Answer 1

出现这种情况是因为正如你所说的浮动元素被取出流动所以它们旁边的元素上升并占据了它们的空间。但浮动元素仅部分地从流动中取出。部分地，在它们旁边的元素忽略它们，就像它们不再流动一样，但它们内部的内容仍然尊重这些浮动元素，因此被水平或垂直推动。

您可以将浮动元素视为浮动在其他元素之上。此外，其他元素的内容也有点高于它们。因此，他们的平面（或背景颜色）位于浮动元素下方，但内容被向下（或水平）推送。

关于您的特定情况，您应该记住浮动元素旁边的元素总是占用浮动元素的空间。在您的演示中，它似乎有点混乱，因为您的浮动元素的宽度设置为100％，这导致下一个元素的内容不仅水平向下推。希望有道理吗？

类比

作为类比，您可以将所有html元素视为1厘米厚的木板，并在其上方放置一些厚字母块。有点像下图：

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

将float: left应用于标题元素时，它会在曲面上方1厘米处浮动，并向页面的左边界浮动。现在，它不与下一个元素保持同一水平，它的下一个元素尽可能地向上和向左上升。但是当浮动元素上升仅1厘米时，只有下一个元素的底部木板上升，而所有字母都被浮动元素向下推。