CSS: guida ai float per autori di plugin Wordpress e jQuery

Ho notato che tra gli autori di plugin Wordpress e jQuery c'è ancora una certa confusione riguardo ai float CSS. Molto spesso infatti vedo codice che non tiene conto di alcune regole basilari per la gestione dei float CSS. Scopo di questo articolo è chiarire come funzionano i float CSS per avere plugin più adattabili e flessibili.

I float modificano il flusso del documento

Un elemento flottato crea un'interruzione nel flusso del documento. Gli elementi che lo circondano si dispongono intorno al float. Più precisamente sul lato sinistro se l'elemento è flottato a destra e su quello destro se è flottato a sinistra.

Un tipico esempio è rappresentato dalle immagini flottate: il testo si dispone intorno all'immagine e la supera in altezza solo se è presente una certa quantità di testo. Questo avviene perchè un float "ruba" lo spazio agli elementi che lo circondano.

È possibile fare in modo che gli elementi si dispongano a lato del float senza avvolgerlo completamente specificando un margine o un padding superiore alla larghezza dell'elemento flottato:

#float {
    float: left;
    width: 100px;
}

#content {
    margin-left: 110px;
}

In questo caso usiamo il margine che va nella stessa direzione del float.

Ripristino del flusso del documento

Il ripristino del normale flusso del documento per quegli elementi che seguono i float avviene tramite la proprietà clear, che accetta i valori left (se il float è flottato a sinistra), right (se il float è flottato a destra) e both (se abbiamo un float flottato a sinistra e un altro flottato a destra).

Esempio:

<img class="float"/>
<div id="content">...</div>
<p class="clear">...</p>

img {
    float: left;
}

p.clear {
    clear: left;
}

La proprietà clear, se applicata ad un float, ha l'effetto di impedire ad altri float di affiancarsi all'elemento corrente, ma non ha in questo caso alcun effetto sugli elementi non flottati.

Contenimento dei float

All'interno di un contenitore, i float fanno collassare lo spazio verticale. L'effetto è visibile specie quando il contenitore ha un bordo o un colore di sfondo. Per questo motivo va applicato un contenimento all'elemento che racchiude i float.

Esistono diverse tecniche in tal senso, ma le più popolari sono:

1. overflow: hidden (o auto)

   
   #container {
       overflow: hidden;
   }
   

2. Easy Clearing

   
   #container:after {
       content: '.';
       display: block;
       clear: both;
       height: 0;
       overflow: hidden;
       font-size: 1px;
   }
   

Ecco come potrebbero apparire i float dopo aver applicato uno di questi metodi:

Float e dimensioni

I float si dispongono automaticamente sulla riga corrente, e continuano ad allinearsi uno dopo l'altro finchè c'è spazio sufficiente sulla riga corrente. Quando lo spazio finisce, i float vengono automaticamente spinti sulla riga successiva. E così via.

Per ottenere la griglia vista nell'immagine occorre calcolare con precisione le dimensioni del contenitore e dei float al loro interno. Diciamo che il contenitore ha questi stili:

#container {
    width: 400px;
    overflow: hidden;
}

Vogliamo due box flottati per riga, con uno spazio tra di loro in orizzontale e verticale. 400 diviso 2 da 200. A 200 dobbiamo sottrarre 10 pixel per il margine destro del float e 5 pixel per quello sinistro. Dunque abbiamo 185 pixel di larghezza per ciascun float. Quindi scriveremo:

div.float {
    float: left;
    width: 185px;
    margin: 5px 10px 5px 5px;
}

I float andranno automaticamente su una nuova riga a due a due, perchè non c'è abbastanza spazio in larghezza per più di due float per riga. In pratica, con i float è fondamentale calcolare lo spazio disponibile su ciascuna riga.