为什么“溢出：自动”清除浮动？为什么需要清晰的花车？

Question

当我创建（有史以来第一次！）两列时，我的问题出现了。

我的左列和右列有一个包装器，但包装器的高度没有扩展以适应左右列，每个列分别浮动到其一侧。

我在网上找到了一个解决方案，它在包装器中添加了样式（这是正确的词吗？）“溢出：自动”。经过一番研究，我发现了几篇解释溢出作用的文章，包括这个 stackoverflow 答案：Why "overflow: hidden" clears a float?

但是，我的研究中没有任何内容可以解释为什么包装器的高度不会自动扩展以适应嵌套的 div，即两列。

不是所有嵌套在 div 中的东西都包含在该 div 中吗？这不会为内部元素创建边界吗？

感谢您对这个菜鸟的任何帮助。谢谢！

Answer 1

默认情况下包装器不拉伸以包含其浮动的原因是因为浮动是从包装器的normal flow 中取出的，因此包装器的行为就像它们从未存在过一样。如果包装器中没有其他内容，则意味着包装器没有任何高度。

注意overflow: auto 不会清除浮动——它只是通过为它们建立一个新的块格式化上下文来使元素包含它的浮动，这样它们就不会侵入其他元素父上下文中的元素。¹ 这就是迫使父级拉伸以包含它们的原因。只有在浮动 之后添加清除元素，才能清除浮动。父元素无法清除其浮动子元素。

建立新的BFC导致元素包含其浮动的原因详见here，overflow: auto甚至会导致建立BFC的原因详见here。

---

¹_{好吧，也许“just”并不是最好的副词。}