the clearfix hack

Qui c'è una strana, brutta cosa che a volte succede usando i float:

img {
  float: right;
}

<div>

Uh oh... queta immagine è più alta dell'elemento che la contiene, e sta flottando, quindi sta sbordando fuori dal suo contenitore!

Bleah. C'è un modo per correggere, ma è brutto. È chiamato il clearfix hack.

Proviamo aggiungendo questo nuovo CSS:

.clearfix {
  overflow: auto;
}

Adesso vediamo cosa succede:

<div class="clearfix">

Molto meglio!

Questo funziona con i browser moderni. Se vuoi supportare IE6 dovrai aggiungere il seguente codice:

.clearfix {
  overflow: auto;
  zoom: 1;
}

Ci sono browser esotici che potrebbero richiedere attenzione extra. Il mondo del clearfix è piuttosto spaventoso, ma questa semplice soluzione funzionerà per la maggior parte dei browser di oggi.