为什么'溢出:自动'清除浮动?为什么需要清晰的浮子?

时间:2014-03-02 15:13:38

标签: css overflow clear

当我创建我的(第一个!)两列时,我的问题出现了。

我的左右列有一个包装器,但是包装器的高度没有扩展到适合左右列,每个列分别浮动到其侧面。

我在网上找到了一个解决方案,它添加了样式(这是正确的词吗?)'溢出:自动'到包装器。经过一些研究,我发现了几篇解释溢出功能的文章,包括这个stackoverflow答案:Why "overflow: hidden" clears a float?

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

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

对于这个noobie,任何帮助都表示赞赏。谢谢!

1 个答案:

答案 0 :(得分:24)

默认情况下,包装器不伸展以包含其浮动的原因是因为浮动从包装器的normal flow中取出,因此包装器就好像它们从不在那里一样。如果包装器中没有其他内容,则表示包装器没有任何高度。

请注意,overflow: auto不会清除浮点数 - 它只是通过为它们建立新的块格式化上下文来使元素包含其浮点数,以便它们不会侵入在父上下文中的其他元素。 1 这就是迫使父进行拉伸以包含它们的原因。如果在浮动之后添加清除元素,则只能清除浮动。父元素无法清除其浮动子元素。

建立新BFC导致元素包含其浮点数的原因详细hereoverflow: auto甚至会导致建立BFC的原因详细here


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