css - Overflow:hidden in float. Does it hide anything? -

i understand overflow:hidden way clear float, not understand why. suppose if use overflow:hidden because there outside element affected float? if so, hidden?

for example, in case, there in #second hidden makes beside #first ?

(there question related, different, more specific. question is: "overflow:hidden" hide anything? it?)

here example: 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> 

as name suggests, overflow:hidden hides content overflows element (i.e. excesses given dimensions). in example there no overflow actually, nothing hidden. side-effect of setting overflow other visible (as display: inline-block, float etc.) change of behavior of block. while normal block doesn't take floats account @ (only text content does), block establishes new block formatting context (see adrift's answer) isolates of content inside, including nested floats, potentially collapsible margins etc.

this side effect may used prevent container of floats collapsing, doesn't have clearing floats. clearing , bfcs act differently in case of collapsible margins, other floats earlier in document, etc.