为什么overflow：hidden展开父元素（包含浮动的子元素）？ [英] Why overflow:hidden expands parent element (containing floated child elements)?

问题描述

总之：

基本上，我只是想知道为什么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

长版本：

未定位的非浮动块级元素浮动元件不在那里，因为浮动元件相对于其它块元件不流动。内联元素环绕浮动元素以确认它们的存在。
我知道overflow属性是如何工作的，在哪里应用它，并且清除浮动最好用clearfix而不是overflow属性来完成（虽然有些情况可能需要使用溢出清除）。但是，我还是不明白为什么它扩展父元素，特别是当我们使用overflow：hidden。为什么父元素不只是隐藏溢出的浮动子元素？毕竟，我们不是隐藏溢出吗？

Long version:
Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements. And inline elements wrap around the floated elements to acknowledge their presence. I know how the overflow property works and where to apply it, and that clearing floats is best done with a clearfix and not the overflow property (although some cases may call for the usage of overflow clearing instead). However, I still don't understand why it expands the parent element, especially when we use overflow:hidden. Why don't the parent element just "hide" the overflowing floated child element? After all, aren't we hiding overflow?

推荐答案

这是一个很好的问题。我给了它一个想法。父元素上设置的

It is a very good question. I gave it a thought.

overflow：hidden code> height 或 width 定义（我测试了它）。 height 或扩展父元素（包含浮动子元素）宽度未确定。

overflow:hidden set on the parent element clips the overflow of the child elements when the parent element has a height or width defined (I tested it). overflow:hidden expands parent element (containing floated child elements) in the case either height or width of the parent element is not determined.

所以，似乎发生的是在父元素上设置 overflow：hidden 要应用的区域。由于父元素没有 height 和 width 设置，所以相同的区域将由儿童的大小元素。同时，在区域被设置之后，没有什么要被切割，因为子浮动元件提供了用于进行剪切的区域。

So, what seems to happen is that overflow:hidden set on the parent element enters in action and looks for an area to be applied. As the parent element does not have height and width set, that same area will be yielded by the size of the child elements. Simultaneously, after the area is set there is nothing to be cut since the child floating elements are providing the area to make a clipping from.

但是，当您将 box-shadow 应用于子浮动元素时， box-shadow 可能被裁剪，这取决于它的大小，这是为什么也许扩展父元素（包含浮动的子元素）的最佳解决方案是解决方案之一1由AMk为此问题提供你如何保持父母的浮动元素是否崩溃？

However, when you apply a box-shadow, for instance, to the child floated element, the box-shadow may be clipped, depending of the size of it, and that's one of the reasons why perhaps the best solution to expand a parent element (containing floated child elements) is the solution 1 provided by A.M.k for this question How do you keep parents of floated elements from collapsing?

这篇关于为什么overflow：hidden展开父元素（包含浮动的子元素）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！