Perché overflow nascosto interrompe gli elementi mobili che sfuggono al loro contenitore?

Question

Un problema comune che ho con le pagine web è flottante div che strisciano fuori dai loro contenitori.

#wrapper{ 
    border:1px solid red; 
} 

#wrapper div{ 
    float:left; 
    font-size: 3em; 
} 
... 
<div id="wrapper"> 
    <div>Hello World</div> 
</div> 

vivo esempio: http://jsfiddle.net/ugUVa/1/

Ci sono un sacco di modi di sporchi per risolvere questo problema (l'inserimento di un div con clear: both)

Una soluzione molto più elegante che ho visto è l'impostazione dei div involucro stile overflow per nascondere:

Esempio: http://jsfiddle.net/ugUVa/2/

Questo metodo funziona bene tutti i browser, bello e pulito senza markup addizionale. Sono felice, ma non ho idea di perché funzioni!

Tutta la documentazione che ho guardato indica overflow: hidden è per nascondere il contenuto, non il ridimensionamento di un genitore per adattare i suoi figli ...

Qualcuno può offrire una spiegazione per questo comportamento?

Grazie

Answer 1

Esso crea un block formatting context.

contesti di formattazione Block sono importanti per il posizionamento (vedere float) e di compensazione (vedi chiaro) di galleggianti. Le regole per il posizionamento di e la cancellazione dei float si applicano solo alle cose all'interno dello stesso contesto di formattazione del blocco . I float non influiscono sul layout delle cose in altri contesti di formattazione dei blocchi e cancellano solo cancella i float passati nello stesso contesto di formattazione dei blocchi dello .

vedi anche: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

E 'corretto affermare che lo stile overflow ha lo scopo di controllare ciò che accade a traboccare contenuti.

L'effetto sugli elementi mobili è un effetto collaterale dello stile overflow che crea un contesto di formattazione dei blocchi per l'elemento.

Quando non si specifica una dimensione per l'elemento che la contiene, il contesto di formattazione del blocco ottiene la sua dimensione dagli elementi che contiene, così che è la dimensione che ottiene l'elemento contenitore.