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

简而言之：
基本上,我只是想知道为什么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时.为什么父元素只是“隐藏”溢出的浮动子元素？毕竟,我们不是隐藏溢出？

解决方法

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

overflow：父元素的隐藏集会在父元素定义了高度或宽度时剪切子元素的溢出(我测试了它). overflow：hidden在父元素的高度或宽度未确定的情况下展开父元素(包含浮动的子元素).

所以,似乎发生的是溢出：父元素上的隐藏集进入操作并查找要应用的区域.由于父元素没有设置高度和宽度,因此子元素的大小将产生相同的区域.同时,在设置区域之后,由于子浮动元件提供从中进行剪切的区域,因此没有任何东西可以被切割.

但是,例如,当您将子阴影应用于子浮动元素时,可能会剪切框阴影,具体取决于它的大小,这也是为什么可能是扩展父元素的最佳解决方案的原因之一(包含浮动的子元素)是AMk为此问题How do you keep parents of floated elements from collapsing?提供的解决方案1

原文地址：https://www.jb51.cc/css/214018.html