le hack clearfix

Voici un truc bizarre, gênant qui arrive parfois en utilisant les floats:

img {
  float: right;
}

<div>

Oh oh... cette image est plus grande que l'élément qui la contient, et elle est flottante, donc elle déborde de son conteneur !

Il existe une manière de régler ce problème, mais c'est moche. Ça s'appelle clearfix hack

Essayons d'ajouter cette nouvelle CSS :

.clearfix {
  overflow: auto;
}

Maintenant voyons ce qu'il se passe :

<div class="clearfix">

Beaucoup mieux !

Ça marche pour les navigateurs récents. Si vous voulez supporter IE6 vous devez ajouter ce qui suit :

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

Il existe des navigateurs plus exotiques qui demanderont peut-être plus d'attention. Le monde du clearfix est plutôt effrayant, mais cette solution simple marchera pour la grande majorité des navigateurs.