css – 为什么’overflow:auto’清除浮点数?为什么需要清除浮标?

前端之家收集整理的这篇文章主要介绍了css – 为什么’overflow:auto’清除浮点数?为什么需要清除浮标?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我创建我的(第一个)两列时,我的问题出现了.

我有一个我的左列和右列的包装,但包装的高度没有扩大到适合左列和右列,分别浮动到它的一侧.

我找到了一个在线解决方案,它添加了风格(这是正确的单词吗?)’overflow:auto’到包装器.经过一番研究,我发现几篇文章解释了溢出的作用,包括这个stackoverflow的答案:Why “overflow: hidden” clears a float?

但是,我的研究中没有什么可以解释为什么包装器的高度不会自动扩展以适应嵌套的div,两列.

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

任何帮助是赞赏这个noobie.谢谢!

解决方法

默认情况下,包装器不能包含其浮动的原因是因为浮动体从包装纸的 normal flow中取出,因此包装器的作用就好像从不存在.如果包装器中没有其他内容,那意味着包装器不会有任何高度.

请注意,overflow:auto不清除浮点数 – 它只是通过为它们建立一个新的块格式化上下文来使元素包含其浮点,以便它们不会侵入父上下文中的其他元素.这就是迫使父母伸展以遏制他们.如果在浮动后添加清除元素,则只能清除浮点数.父元素无法清除其浮动子项.

建立新的BFC导致元素包含其浮动的原因是here,详细here详细描述了overflow:auto甚至导致建立BFC的原因.

1 OK,也许“只是”不是使用最好的副词.

猜你在找的CSS相关文章