20972
Question:
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?
For example, in this case, is there anything in #second that is hidden that makes it be beside #first ?
(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?)
Here is the example: <a href="http://jsfiddle.net/NSCpD/" rel="nofollow">http://jsfiddle.net/NSCpD/</a>
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>
Answer1:As its name suggests, overflow:hidden hides any content that <em>overflows</em> 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.
This side effect may be used to prevent the container of floats from collapsing, but it doesn't have anything to do with <em>clearing</em> floats. Clearing and BFCs act very differently in case of collapsible margins, other floats earlier in the document, etc.
Answer2:An element with an overflow value other than visible establishes a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" rel="nofollow">Block Formatting Context</a>. The fiddle your provided is a bit different than when an in-flow block level element contains a float. Even if the in-flow block level element is a sibling of an out of flow float it will still acknowledge it's presence as if it were a line box when a new BFC is created. The <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" rel="nofollow">spec</a> describes this in these two excerpts:
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). <strong>This is true even in the presence of floats</strong> (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
</blockquote>