Html 为什么浮动div会让下一个div占据整个空间？

我知道浮子使元素部分脱离正常流动。令我惊讶的是，我看到一个浮动div的下一个div也占据了浮动div的空间。例如：

.header{
浮动：左；
高度：100px；
宽度：100%；
背景：绿色；
填充：10px；
背景剪辑：内容框；
}
.页脚{
背景：黄色；
边框：1px点红色；
填充：10px；
}

标题
页脚为黄色，带红色边框

发生这种行为的原因是，正如您所说，浮动元素被移出流，因此它们旁边的元素上升并占据它们的空间。但浮动元素仅部分地从流动中移除。从某种意义上说，它们旁边的元素忽略了它们，就像它们不再流动一样，但它们内部的内容仍然尊重这些浮动的元素，因此被水平或垂直推送

您可以将浮动元素想象为浮动在其他元素之上。此外，其他元素的含量也在某种程度上高于它们。因此，它们的平面（或背景色）位于浮动元素下方，但内容向下（或水平）推

关于您的特殊情况，您应该记住，浮动元素旁边的元素总是占据浮动元素的空间。在您的演示中，似乎有点混乱，因为您的浮动元素的宽度设置为100%，这会导致下一个元素的内容向下推，而不仅仅是水平推。希望这有意义

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

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

---

当您将

float:left

应用于页眉元素时，它会高出表面1cm，并朝页面的左边界浮动。现在，它和它的下一个元素不是水平的，它的下一个元素向上升起并尽可能向左。但由于浮动元素仅上升1厘米，只有下一个元素的底部木板上升，而所有字母都被浮动元素压下。

看起来页眉只包含在页脚中，因为您浮动了页眉。删除示例中不必要的属性，如宽度、高度、填充，并在两个div之间放置一些内容，您将看到页脚向下移动，页眉不包含在其中。@j08691在这种情况下，我放置的内容将充当页眉的容器。我想这就是浮子的工作原理；对于非浮动元素，浮动div的内容是存在的，而不是浮动div本身。此外，我认为

footer

上的

clear

属性将其向下推，因为它可能会使footer认为前面的浮动div现在处于流中。