为什么溢出:隐藏扩展父元素(包含浮动的子元素)？

Question

简而言之:
基本上,我只是想知道为什么过度使用:隐藏了包含浮动物品的容器.它不应该像这个图像中那样隐藏溢出的元素http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

为什么会这样做而不是http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

长版本:
非定位,非浮动,块级元素的作用就像浮动元素不存在一样,因为浮动元素相对于其他块元素不流动.内联元素环绕浮动元素以确认它们的存在.我知道溢出属性如何工作以及应用它的位置,并且清除浮动最好使用clearfix而不是overflow属性(尽管某些情况可能需要使用溢出清除).但是,我仍然不明白为什么它扩展了父元素,特别是当我们使用overflow:hidden时.为什么父元素只是"隐藏"溢出的浮动子元素？毕竟,我们不是隐藏溢出？

Answer 1

这是一个非常好的问题.我试了一下.

overflow:hidden当父元素具有height或width定义(我测试它)时,在父元素上设置剪辑子元素的溢出.overflow:hidden在扩展的情况下的父元素(包含漂浮的子元素)或者height或width父元素的没有被确定.

因此,似乎发生的事情是overflow:hidden父元素上的set进入操作并查找要应用的区域.由于父元素没有height和width设置,因此子元素的大小将产生相同的区域.同时,在设置区域之后,由于子浮动元件提供从中进行剪切的区域,因此没有任何东西可以被切割.

但是,box-shadow例如,当你应用一个子浮动元素时,box-shadow可能会剪切它,具体取决于它的大小,这也是为什么可能是扩展父元素(包含浮动的子元素)的最佳解决方案的原因之一是AMk为此问题提供的解决方案1 如何让浮动元素的父母不会崩溃？

Answer 2

尽管其他人有评论，但这确实是一个很好的问题。

\n\n

实际的答案是“因为有人决定它应该这样工作。”

\n\n

幸运的是，我们可以在网上讨论这个话题，也许可以影响那些人，有时甚至可以改变事情。

\n\n

同时，您可以随时阅读“为什么容器不\xe2\x80\x99t 自行清除”： http://css-tricks.com/containers-dont-clear-floats/

\n