简而言之:
基本上，我只想知道为什么 overfow:hidden 会扩展包含 float 元素的容器。它不应该像这张图片那样 overflow hidden 元素吗 http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png
为什么要这样做 http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png
长版:
非定位、非 float 、 block 级元素的行为就好像 float 元素不存在一样，因为 float 元素相对于其他 block 元素不在流中。内联元素环绕 float 元素以确认它们的存在。
我知道溢出属性是如何工作的以及在哪里应用它，并且清除 float 最好使用 clearfix 而不是溢出属性(尽管某些情况下可能需要使用溢出清除)。但是，我仍然不明白为什么它会扩展父元素，尤其是当我们使用 overflow:hidden 时。为什么父元素不直接“隐藏”溢出的 float 子元素？毕竟，我们不是在 overflow hidden 吗？
最佳答案
这是一个很好的问题。我考虑了一下。
当父元素定义了height 或 width 时，在父元素上设置 overflow:hidden 会剪辑子元素的溢出(我测试过)。 overflow:hidden 在未确定父元素的 height 或 width 的情况下扩展父元素(包含 float 的子元素)。
因此，似乎发生的是在父元素上设置的 overflow:hidden 开始起作用并寻找要应用的区域。由于父元素没有设置 height 和 width ，因此相同的区域将由子元素的大小产生。同时，在设置区域后，没有任何内容可以剪切，因为子 float 元素正在提供区域以进行剪切。
但是，例如，当您将 box-shadow 应用于子 float 元素时，box-shadow 可能会被剪裁，具体取决于它的大小，这就是为什么扩展父元素(包含 float 子元素)的最佳解决方案可能是 A.M.k 针对此问题提供的解决方案 1 的原因之一 How do you keep parents of floated elements from collapsing?
关于css - 为什么溢出:hidden expands parent element (containing floated child elements)?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19972790/