6

简而言之：
基本上，我只想知道为什么 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 而不是溢出属性来清除浮动（尽管某些情况下可能需要使用溢出清除）。但是，我仍然不明白为什么它会扩展父元素，尤其是当我们使用溢出时：隐藏。为什么父元素不只是“隐藏”溢出的浮动子元素？毕竟，我们不是在隐藏溢出吗？

4

2 回答 2

7

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

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

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

但是，box-shadow例如，当您将 a 应用于子浮动元素时，box-shadow可能会根据它的大小进行裁剪，这可能是扩展父元素（包含浮动子元素）的最佳解决方案的原因之一是 AMk 为这个问题提供的解决方案 1如何防止浮动元素的父级折叠？

于 2015-04-27T19:12:55.820 回答
3

尽管其他人发表了评论，但这是一个非常好的问题。

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

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

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

于 2014-04-12T04:55:23.043 回答