浮动元素会导致父对象崩溃。HTML / CSS

Question

如果我有以下代码：

<div>
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

父级将折叠，并且看起来高度为0px。

因此，我猜这是一个已知问题，并且有可用的修复程序，但是我真的很想知道为什么它首先发生。

有人可以解释吗？

我不需要任何CSS修复程序，这里已经介绍了它们，我想解释一下为什么会首先发生这种情况。

Answer 1

发生这种情况是因为具有float属性的元素已从文档流中删除，因此父元素的大小保持未知（因为其中没有任何内容），因此将其设置为0。用于使用浮动内部内容overflow:auto调整父对象的height内容。

您的样本 与 overflow:auto样本