CSS: perchè overflow: auto non serve a contenere i float

Qualche tempo fa la dichiarazione overflow: auto poteva servire per contenere i float ed evitare il collassamento dello spazio verticale. A tutti gli effetti la dichiarazione funziona ancora, ma oggi ha lo spiacevole effetto collaterale di far comparire una barra di scorrimento verticale nei browser. Vediamo insieme i dettagli di questa caratteristica dei CSS.

Abbiamo due serie di float:


<div id="line-1">
    
    <span class="float">T</span>
    <span class="float">e</span>
    <span class="float">s</span>
    <span class="float">t</span>
    
</div>

<div id="line-2" class="container">
    <span class="float">T</span>
    <span class="float">e</span>
    <span class="float">s</span>
    <span class="float">t</span>
</div>
​

Alla prima applicheremo il contenimento mediante altezza dichiarata:


#line-1 {
    width: 4em;
    height: 1em;
    border: 1px solid gray;
    margin-bottom: 1em;
}

.float {
    float: left;
    width: 1em;
    height: 1em;
    background-color: silver;
}

Alla seconda applicheremo la dichiarazione overflow: auto:


#line-2 {
    width: 4em;
    border: 1px solid gray;
}

.container {
    overflow: auto;
}
​

Il risultato sarà quello di avere una barra di scorrimento nella seconda serie di float. Potete visionare l'esempio di seguito.

Test

Float e overflow

Torna su