CSS  »  Articoli  »  CSS Template e layout 

La proprietà float è senza dubbio una delle più utili e usate dei CSS, soprattutto per organizzare layout e sezioni di pagina. Ne abbiamo parlato in moltissime occasioni, per esempio nella Guida ai layout con i CSS, e negli articoli sul Capire il box model, quelli sul layout Layout liquido a 2 colonne con i CSS e tre colonne e quello sulla risoluzione dei problemi.

Questo articolo, oltre ad essere un breve riepilogo delle cose essenziali da sapere sui float, nasce con lo scopo di presentare alcune soluzioni pratiche alla luce di nuove e recenti tecniche. Iniziamo subito.

Float: la teoria in breve

Come abbiamo visto nell'articolo sul Capire il box model, elementi float vengono resi automaticamente block-level: questo significa che si può attribuire loro una larghezza e/o un altezza via CSS.

A differenza degli elementi block-level normali, gli elementi float oltre ad essere auto-adattanti in altezza (ossia assumere l'altezza necessaria al contenuto) lo sono anche in larghezza. Questo significa che un elemento float assumerà la larghezza massima per il suo contenuto, fino ad espandersi per tutta la larghezza del suo contenitore.

È essenziale considerare che gli elementi float vengono traslati dal flusso degli elementi di pagina verso uno dei due estremi del loro contenitore, e che elementi adiacenti nel codice "sentono" la loro presenza, regolandosi di conseguenza. Ciò nonostante, gli antenati degli elementi float, ossia i loro contenitori, li ignorano.

Una compagna quasi inseparabile della proprietà float è la proprietà clear che, se applicata ad un elemento successivo ad uno reso float, impedisce che questo subisca il float.

Controllare la larghezza di un elemento float

Come abbiamo accennato i float sono, a differenza di elementi block-level normali, auto-adattanti in larghezza, ovvero se non hanno una larghezza o dei margini impostati, si espanderanno in orizzontale fino alla larghezza del loro contenitore. (o almeno in via teorica: questo non succede infatti in Internet Explorer 6).

Ho preparato un semplice esempio per mostrare come elementi float si espandano in orizzontale a seconda del loro contenuto. È un esempio molto semplice, ma se lo osservate sia con IE che con un browser come Safari, Opera o Mozilla, noterete che tra IE e gli altri browser ci sono differenze di resa. Il comportamento che ci si aspetta è questo:

Figura 1. Float non controllati in larghezza

Ovvero, il comportamento di un browser di ultima generazione. In ogni caso, gli effetti di float non controllati in larghezza sono imprevedibili, soprattutto in casi reali in cui non ci sono solo elementi float.

Una buona pratica è quindi costringere il float in larghezza. I modi possibili sono due:

1. Attribuire una larghezza al suo contenuto, o usare esclusivamente contenuto di larghezza nota.
2. Dichiarare la larghezza dell'elemento float.

Altri articoli

Altre guide

Altre newsletter