一尘不染

为什么“溢出:自动”清除浮动?为何需要透明浮筒?

css

当我创建我的(有史以来第一次)两列时,我的问题浮出水面。

我的左,右列都有一个包装器,但是包装器的高度没有扩大到适合左,右列的位置,每一个分别漂浮在其侧面。

我在网上找到了一个解决方案,在该解决方案中,它向包装器添加了样式“overflow:auto”(这是对吗?)。

但是,在我的研究中,没有什么能以一种我可以理解的方式解释为什么包装器的高度不能自动扩展以适应嵌套的divs和两列。

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

感谢您对此noobie的任何帮助。谢谢!


阅读 316

收藏
2020-05-16

共1个答案

一尘不染

包装器默认情况下不会拉伸以包含其浮点数的原因是,因为浮点数是从包装器的正常流程中取出的,所以包装器的行为就好像它们从未在其中。如果包装中没有其他内容,则表示包装没有高度。

请注意,这overflow: auto并不能 清除_浮点数,它只是通过为元素建立新的块格式上下文来使元素包含其浮点数,以使它们不会侵入父上下文中的其他元素。1这就是迫使父母伸张牵制他们的原因。仅 _当_在浮动 _之后 添加清除元素时, 才能 清除浮动。父元素无法清除其浮动子元素。


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

2020-05-16