Cosa fa overflow: hidden do for ul tag?

Question

Sto creando un elenco di colonne multipla usando le indicazioni da questo articolo:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

In poche parole, si dice di fare qualcosa sulla falsariga di questo:

HTML:

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div> 

CSS:

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
} 

E funziona meravigliosamente, ma sono rimasto sbalordito dall'overflow: dichiarazione CSS nascosta.

Senza di essa, il mio div esterno crolla in questo modo:

http://jsfiddle.net/alininja/KQ9Nm/1/

Quando è incluso, il div esterno si comporta esattamente come come avrei voglio che sia:

http://jsfiddle.net/alininja/KQ9Nm/2/

Mi chiedo perché overflow: nascosto sta innescando questo comportamento. Mi aspetterei che tagli gli oggetti interni invece di forzare il div esterno ad espandersi all'altezza necessaria.

Grazie per la ricerca!

Answer 1

Qualsiasi cosa all'interno che potrebbe essere mobile non viene tagliata a meno che l'overflow non sia impostato su hidden, scroll o auto. La vera magia del metodo è che senza aver dato un elemento all'altezza impostata, quando si imposta overflow su hidden assume l'altezza degli elementi interni.

Qui il div non avvolgerebbe l'img perché l'img è mobile.

<div><img style="float:left;height:100px" /></div> 

Qui il div attualizzerà l'altezza dell'img ora che ha un overflow corretto.

<div style="overflow:hidden"><img style="float:left;height:100px" /></div> 

Se si dovesse dare un altezza set e quindi impostare troppo pieno nascosto che sarebbe tagliare tutto ciò che altrimenti sarebbe traboccato verso l'esterno.

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div> 

Si noti che in molti casi queste tecniche possono essere utilizzati per evitare clear:both tipo di marcatura supplementare.

Answer 2

Il overflow: hidden; è lì per contenere il float li s. overflow: hidden; crea un nuovo contesto di formattazione dei blocchi - e questo è ciò che fanno gli elementi con i propri contesti di formattazione dei blocchi - contengono float.

Io punto ad un'altra risposta qui su StackOverflow che spiega questo un po 'di più: Adding CSS border changes positioning in HTML5 webpage

Answer 3

Con overflow: hidden, il contenuto non guidano/spingere le dimensioni della UL. Le dimensioni UL prevalgono e ignorano se il contenuto si adatta o meno al suo interno.

Senza overflow: nascosto il contenuto e il loro comportamento può o non può guidare le dimensioni generali dell'UL. Ciò è principalmente dovuto al fatto che l'UL è più di un contenitore i cui confini sono impostati/influenzati dai suoi contenuti. Con l'overflow nascosto, UL funge più da porta di visualizzazione con dimensioni prevalenti, non tanto da contenitore.