Le proprietà CSS float e clear

Le proprietà float e clear sono forse le più difficili da comprendere se non siamo esperti di CSS. Esistono molti articoli che provano a spiegare il funzionamento della proprietà float, ma è raro trovare spiegazioni ed esempi che chiariscano ogni dubbio. Con questo articolo proveremo a spiegare soprattutto perché esiste la proprietà float, in modo che una volta compresi i motivi che ne giustificano l'esistenza sia più facile imparare a sfruttarla.

Lo scopo principale della proprietà float è sostituire l'attributo align dell'HTML, che è stato deprecato con la versione HTML 4.01. Esemplificando, si potrebbe dire che tutto ciò che una volta veniva fatto usando align, si può fare usando float. Consideriamo ad esempio

lo scopo del codice qui sopra è (sarebbe meglio dire era) quello di allineare l'elemento img sulla destra. In questo caso si vuole allineare un elemento img di tipo inline (in linea) che si trova all'interno di un elemento p di tipo block (blocco). L'attributo align, come abbiamo già detto, è deprecato e non andrebbe più usato. La proprietà float lo sostituisce, permettendoci di ottenere lo stesso risultato in questo modo

L'esempio qui sopra dovrebbe bastare per usare correttamente la proprietà float nella grande maggioranza dei casi che ci servono. Esistono molte applicazioni della proprietà float, e forse è proprio per questo che in alcuni casi ci sembra complicata o astratta: se cerchiamo di capire subito tutte le applicazioni di float rischiamo di confonderci le idee. E' però bene iniziare ad utilizzare sin da subito float per allineare un'immagine a sinistra (FLOAT:left) oppure a destra (FLOAT:right), prima di approfondire l'argomento.

Una volta compreso l'utilizzo ordinario di float, potrebbe restarci un dubbio del tipo: “se serve ad allineare perché si chiama float, ovvero galleggiare?”.

Per rispondere dobbiamo ricordarci degli elementi in linea e elementi a livello di blocco. Per chi non lo sapesse, gli elementi di blocco sono quelli che usano (orizzontalmente) tutto lo spazio a disposizione, per cui dopo ogni elemento di blocco “andiamo a capo” con il prossimo elemento. I più famosi elementi di blocco sono probabilmente p e div. Gli elementi in linea sono invece quelli che si inseriscono “tra un elemento e un altro”, occupando il minimo spazio necessario e senza mandare a capo l'elemento successivo. Tra gli elementi in linea più utilizzati spiccano span e img.

Consideriamo adesso la seguente situazione

la proprietà float farà sì che tutti i paragrafi successivi all'immagine si dispongano “scivolando” accanto al quadrato rosso, che rimane allineato a destra. Il risultato potrebbe essere

Flusso e floating

dove i paragrafi continuano a disporsi secondo il normale flusso verticale degli elementi di blocco, l'uno sotto l'altro, creando una sorta di “flusso” o “corrente” di elementi HTML che procede dall'alto verso il basso. Da questo punto di vista, l'immagine collocata a destra (il quadrato rosso) sembra “galleggiare” sulla destra, incurante del flusso verticale. Questo è un modo di spiegare il significato della proprietà float che dovrebbe aiutarci anche a ricordarne il funzionamento.

Nella figura qui sopra osserviamo che i paragrafi blu sono elementi di blocco, che però non occupano tutto lo spazio orizzontale, ma terminano prima dell'immagine. Questi paragrafi non sono neanche elementi in linea, perché se cambiamo le dimensioni dell'immagine, della pagina o la lunghezza dei paragrafi, essi potrebbero finire più in basso (dove si trovano i paragrafi verdi) e tornerebbero ad occupare l'intera pagina: quindi sono ancora definiti a livello di blocco. Il loro comportamento viene però influenzato della presenza dell'elemento float (il quadrato rosso), che in qualche modo li rende ibridi, ovvero a metà strada tra elementi di blocco e in linea.

In altre parole: il fatto di aver imposto la proprietà float sul quadrato rosso modifica il comportamento dei paragrafi successivi, o almeno quelli che si troveranno accanto all'elemento “galleggiante”. Ma quanti saranno gli elementi successivi ad un float che verranno impattati dalla presenza dell'elemento galleggiante? E' difficile (e in alcuni casi impossibile) rispondere alla domanda, perché se stringiamo la finestra del browser le cose potrebbero cambiare drasticamente: man mano che stringiamo la finestra il paragrafo B potrebbe scivolare in basso, sotto il quadrato rosso, e quindi tornerebbe ad occupare tutto lo spazio orizzontale. La proprietà clear serve a decidere quando terminare l'effetto di un float precedente. Scrivendo ad esempio

avremo la garanzia che il paragrafo C sarà sempre sotto il quadrato rosso, e che non finirà mai accanto all'elemento galleggiante. L'esempio dovrebbe aiutarci a ricordare perché float e clear sono usati assieme, e soprattutto in che modo.