html - float 元素会导致父元素折叠。 HTML/CSS

Question

如果我有以下代码:

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

父级将折叠并显示为 0px 的高度。

所以我猜这是一个已知问题，并且有 fixes可用，但我真的很想知道为什么它首先发生。

谁能解释一下？

我不是在寻找任何 CSS 修复，它们已被涵盖 here ，我正在寻找关于为什么会首先发生这种情况的解释。

Answer 1

发生这种情况是因为具有 float 属性的元素已从文档流中删除，因此父元素的大小保持未知(因为其中不包含任何内容)因此它被设置为 0。使用 overflow:auto 调整父级的 height 和 float 的内部内容。

your sample 对比 overflow:auto sample