为什么溢出：隐藏扩展父元素（包含浮动的子元素）？

Question

简而言之：
基本上，我只是想知道为什么overfow：隐藏的解释容器包含浮动项目。它不应该隐藏溢出的元素，如图像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时。为什么不要让父元素“隐藏”＃34;溢出的浮动子元素？毕竟，我们不是在隐藏溢出吗？

Answer 1

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

当父元素定义了overflow:hidden或height（我测试过它）时，在父元素上设置的

width剪辑子元素的溢出。在未确定父元素的overflow:hidden或height的情况下，width扩展父元素（包含浮动的子元素）。

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

但是，例如，当您将box-shadow应用于子浮动元素时，box-shadow可能会被剪裁，具体取决于它的大小，这也就是为什么可能是扩展父元素（包含浮动的子元素）的最佳解决方案是AMk为此问题提供的解决方案1 ​​How do you keep parents of floated elements from collapsing?

Answer 2

这是一个非常好的问题，尽管其他人＆＃39;评价。

实际答案是＆＃34;因为有人认为它应该以这种方式工作。＆＃34;

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

与此同时，您可以随时阅读＆＃34;为什么容器不能清除自己＆＃34;：http://css-tricks.com/containers-dont-clear-floats/