CSS: tecniche per il clear dei float cross-browser

  • CSS
  • Gabriele Romanato

Esistono varie tecniche per il clear dei float, ma solo poche tra queste hanno il vantaggio di essere cross-browser. Infatti alcune tecniche possono creare degli effetti indesiderati in alcuni browser o non funzionare correttamente in altri. Scopo di questo articolo è stabilire quali siano le tecniche cross-browser per il clear dei float.

Overflow

Questa tecnica consiste nel dare al contenitore dei float la dichiarazione overflow: hidden o overflow: auto. Tuttavia, esiste una differenza tra queste due dichiarazioni: la prima non consente all'eventuale contenuto posizionato al di fuori dei limiti del box di essere mostrato, mentre la seconda non ha questa limitazione. Per essere compatibile anche con IE6, bisogna aggiungere la dichiarazione height: 1% o height: 100%. Quindi avremo:


.clear {
	overflow: hidden;
	height: 100%;
}

Valori delle tabelle

È possibile usare anche la dichiarazione display: table sul contenitore dei float:


.clear {
	display: table;
}

Lo svantaggio di questa tecnica è che non è supportata da IE6 e 7. Inoltre ci sono delle differenze nel calcolo delle dimensioni degli elementi nei browser basati su Webkit.

Float

Per contenere i float e dare loro il clear è possibile far flottare il loro stesso contenitore:


.clear {
	float: left;

L'unico svantaggio di questa tecnica è che si deve ripristinare il flusso dopo il contenitore dei float.

Contenuto generato

Questa tecnica prevede l'inserimento di un carattere nascosto a cui è stato applicato il clearing dopo il contenuto principale del contenitore dei float:


.clearfix:after {
	content: '.';
	display: block;
	visibility: hidden;
	clear: both;
	font-size: 1px;
}

Tuttavia, occorre prevedere che IE6 e 7 non la supporteranno in quanto non riconoscono il contenuto generato, quindi occorre associare alla classe clear anche le dichiarazioni viste per la tecnica dell'overflow.

Conclusione

Al momento la tecnica più semplice da implementare e al contempo la più efficace è la tecnica dell'overflow. Le altre tecniche presentano comunque delle controindicazioni o sono complicate da realizzare (come la tecnica del contenuto generato).

Torna su