溢出：隐藏在浮动。它隐藏什么吗？ [英] Overflow:hidden in float. Does it hide anything?

问题描述

我明白overflow：hidden是一种清除浮动的方法，但我不明白为什么。
我想如果我们确实使用overflow：hidden是因为有一些东西外面的元素受到float的影响？如果是，什么是隐藏的？

I understand that overflow:hidden is a way to clear float, but I do not understand why. I suppose that If we do use overflow:hidden it is because there is something outside the element that was affected by the float? if so, what is hidden?

例如，在这种情况下，#second中隐藏的任何内容使其位于#first旁边？

For example, in this case, is there anything in #second that is hidden that makes it be beside #first ?

（还有另一个问题是相关的，但是这是不同的，这更具体）我的问题是：overflow：hidden是否隐藏任何东西？）

(There is another question that is related, but this is different, this is more specific. My question is: does "overflow:hidden" hide anything? what is it?)

以下是示例： http://jsfiddle.net/NSCpD/

CSS：

#first{
    float:left;
    width:100px; height:100px;
    background:blue;
}

#second{
    width:300px; height:300px;
    overflow:hidden; /* això fa que no li afecti el float */
    background:red;
}

HTML：

<div id="first"> </div>
<div id="second"> </div>

推荐答案

顾名思义， overflow：hidden 隐藏任何溢出元素的内容（即超出给定的维度）。在这个例子中没有实际上溢出，所以没有隐藏。但是设置溢出而不是可见的（以及显示： inline-block ， float 本身等）是块行为的变化。虽然正常块有效地不考虑浮点数（只有其文本内容），建立新的块格式化上下文的块（见Adrift的答案）隔离其中的所有内容，包括嵌套浮动，可能可折叠边距等。

As its name suggests, overflow:hidden hides any content that overflows the element (i.e. excesses the given dimensions). In this example there is no overflow actually, so nothing is hidden. But the side-effect of setting the overflow other than visible (as well as display: inline-block, float itself etc.) is the change of the behavior of the block. While the normal block effectively doesn't take floats into account at all (only its text content does), the block that establishes new block formatting context (see Adrift's answer) isolates all of its content inside, including nested floats, potentially collapsible margins etc.

这种副作用可能用于防止浮动容器崩溃，但它与清除浮动没有任何关系。在可折叠边距，文档中早期的其他浮动项等情况下，清算和BFC行为非常不同。

This side effect may be used to prevent the container of floats from collapsing, but it doesn't have anything to do with clearing floats. Clearing and BFCs act very differently in case of collapsible margins, other floats earlier in the document, etc.

这篇关于溢出：隐藏在浮动。它隐藏什么吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！