为什么“溢出:自动”清除浮游物? 为什么需要清晰的花车?

当我创build我的(第一次!)两列时,我的问题就出现了。

我有我的左,右列的包装,但包装的高度并没有扩大,以适应左侧和右侧列分别浮动到其一侧。

我在网上find了一个解决scheme,它添加了样式(这是正确的词?)“溢出:自动”到包装。 经过一番研究之后,我发现了一些解释溢出的文章,包括这个stackoverflow的答案: 为什么“overflow:hidden”会清除一个浮点数?

然而,我的研究中没有任何东西可以解释为什么包装的高度不能自动扩展以适应嵌套的div(两列)。

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

任何帮助表示赞赏这个noobie。 谢谢!

包装程序默认不包含浮点数的原因是因为浮点数被从包装程序的正常stream程中取出,所以包装程序就好像它们从不在那里一样。 如果包装中没有其他内容,则意味着包装将不具有任何高度。

请注意, overflow: auto不会清除浮点数 – 它只是通过为它们build立一个新的块格式化上下文来让元素包含浮点数,以便它们不会侵入父上下文中的其他元素。 1这就是迫使父母勉强包容他们的原因。 如果在浮动添加清除元素则只能清除浮动。 父元素不能清除其漂浮的孩子。

为什么build立一个新的BFC会导致一个元素包含它的浮点数, 这里详细介绍,而overflow: auto的原因甚至会导致一个BFC的build立。


1 好吧,也许“只是”不完全是最好的副词使用。