Le bien, le mal
Cette technique est compatible avec tous les navigateurs mais contourne l’usage des flottants float
.
Le principe est simple, tous les éléments d’un bloc parent ont un float:left;/* ou right */
et le père doit être hacké avec une class généralement nommée clearfix ou clear.
Si le père n’est pas clearfixé, il perd sa hauteur « naturelle » néanmoins il garde son padding
(le fond orange du premier exemple ci-dessous), un effet indésirable.
Autrefois, on ajoutait un
avec un clear:both
mais depuis le CSS2, il est facile d’ajouter un élément pseudo-element avec :after
.
.clearfix:after { content:" "; display:block; clear:both; }
See the Pen clearfix by Benoît Wimart (@benoitwimart) on CodePen.