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

【问题标题】：Why overflow:hidden expands parent element (containing floated child elements)?为什么溢出：隐藏扩展父元素（包含浮动子元素）？
【发布时间】：2013-11-27 04:13:57
【问题描述】：

简而言之：
基本上，我只想知道为什么 overfow:hidden 会解释包含浮动项目的容器。它不应该像这张图片中那样隐藏溢出的元素吗http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

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

长版：
非定位、非浮动、块级元素的行为就像浮动元素不存在一样，因为浮动元素相对于其他块元素而言是不流动的。并且内联元素环绕浮动元素以确认它们的存在。我知道溢出属性是如何工作的以及在哪里应用它，并且最好使用 clearfix 而不是溢出属性来清除浮动（尽管某些情况下可能需要使用溢出清除）。但是，我仍然不明白为什么它会扩展父元素，尤其是当我们使用溢出时：隐藏。为什么父元素不只是“隐藏”溢出的浮动子元素？毕竟，我们不是在隐藏溢出吗？

【问题讨论】：

请发布一些代码来证明您的问题。最好使用 JSFiddle。
这是一个理论问题。我说的没有问题。我想知道为什么溢出属性通常会扩展父元素，而不是说隐藏浮动元素。如果您需要浮动和溢出方法的入门知识，请查看css-tricks.com/all-about-floats上标题为“大崩溃”的部分@
我不需要花车入门。我需要一些简单的 html 和 css 代码，这样我就不必浪费时间阅读大量文本和解码复杂的句子，例如“非定位、非浮动、块级元素就像浮动元素不存在一样，因为浮动元素相对于其他块元素不流动”。那不是因为我没有能力，而是因为它不应该是必要的。另请注意，在 24 分钟内，我是唯一回答此问题的人。这也应该给你一个提示，让你的问题更容易理解。
没有冒犯的意思。如果我这样做了，请道歉。基本上，我只想知道为什么 overfow:hidden 会解释包含浮动项目的容器。它不应该像这张图片一样隐藏溢出的元素css-tricks.com/wp-content/csstricks-uploads/…
Why does overflow hidden stop floating elements escaping their container?的可能重复

标签： css css-float overflow clearfix

【解决方案1】：

这是一个非常好的问题，尽管其他人的 cmets。

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

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

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

【讨论】：

【解决方案2】：

这是一个很好的问题。我考虑了一下。

当父元素定义了height或width（我测试过）时，在父元素上设置overflow:hidden会剪辑子元素的溢出。 overflow:hidden 在父元素的height 或width 未确定的情况下扩展父元素（包含浮动子元素）。

所以，似乎发生的情况是父元素上设置的overflow:hidden 开始起作用并寻找要应用的区域。由于父元素没有设置height 和width，相同的区域将由子元素的大小产生。同时，在区域设置后，没有任何东西可以剪切，因为子浮动元素正在提供区域进行剪切。

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

【讨论】：