为什么'overflow：auto'清除浮动？为什么需要清晰的浮标？ [英] Why does 'overflow: auto' clear floats? And why are clear floats needed?

问题描述

我创建了我的（第一次）两列时出现了我的问题。

My question arose when I created my (first ever!) two columns.

我有一个包装我的左右列，但包装的高度didn'

I have a wrapper for my left and right columns, but the wrapper's height didn't expand to fit the left and right columns with each floated to its side respectively.

我在网上找到一个解决方案，它增加了风格（这是正确的词吗？） 'overflow：auto'到包装器。经过一番研究，我发现了几个文章，解释溢出做什么，包括这个stackoverflow答案：为什么overflow：hidden清除浮动？

I found a solution online where it adds the style (is this the right word?) 'overflow: auto' to the wrapper. After some research, I've found several articles that explain what the overflow does, including this stackoverflow answer:Why "overflow: hidden" clears a float?

然而，在我的研究中没有什么解释，我可以理解为什么包装器的高度不会自动展开适合嵌套divs，两列。

However, nothing in my research explains in a way I can understand why the wrapper's height doesn't auto-expand to fit the nested divs, the two columns.

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

Don't all things nested within a div are contained within that div? Doesn't this create boundaries for the inside elements?

任何帮助是赞赏这个noobie。谢谢！

Any help is appreciated for this noobie. Thanks!

推荐答案

默认情况下，包装器不伸展以包含其浮动的原因是因为浮点数包装器的正常流程，因此包装器的作用就好像它们从未存在过。如果包装器中没有其他内容，则意味着包装器将不会有任何高度。

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

请注意， overflow：auto 不会清除浮动 - 它只是通过为其创建新的块格式化上下文来使元素包含其浮动，以便它们不会侵入父类中的其他元素上下文。 ¹ 这是什么迫使父项拉伸包含它们。如果您在之后添加清除元素，则只能清除浮动。父元素不能清除其浮动子元素。

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

创建新的BFC会导致元素包含其浮动的原因是这里， overflow：auto 甚至会导致建立一个BFC。此处。

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

¹ _{OK，也许just不是最好的副词。}

这篇关于为什么'overflow：auto'清除浮动？为什么需要清晰的浮标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！