Corriger les comportements des blocs flottants grâce à ClearFix

clearfix

Nombreux d’entre nous utilisent instinctivement la classe clearfix, mais savons nous vraiment comment elle fonctionne ?

Qu’est-ce que le «ClearFix» ? Eh bien, il s’agit tout simplement d’une petite astuce utilisée dans le but d’éviter aux blocs suivant les bloc flottants de perdre le flux.
Le processus consiste à placer la classe .clearfix sur le bloc conteneur.

Voici le code CSS à mettre en place dans la feuille de style :

Explication

Il faut l’avouer, la lecture de ce code n’est pas assez évidente.
Tout d’abord, la première déclaration concerne les navigateurs modernes, grâce à la pseudo class :after, celle-ci effectue la création d’un bloc invisible après l’élément qui porte le sélecteur « clearfix ». Cela permet de remplacer les br nettoyeur et autres espaceurs de blocs.

Pour ce qui est de la deuxième règle, celle-ci applique inline-tab sur le navigateur IE/MAC…
L’antislash suivant celle-ci masque les déclarations à IE/MAC permettant la précision  de l’application d’une hauteur de 1 % seulement pour IE6 pour le déclenchement le «hasLayout» sans quoi le hack présent ne serait pas efficient. Sans oublier la ré-application de display:block à tous sauf IE/MAC.

ClearFix s’emploie de la manière suivante dans les pages HTML :

Par habitude, nous utilisons toujours le ClearFix à deux endroits qui sont les li des listes d’articles contenant la plupart du temps une vignette flottante ainsi que le bloc conteneur. Valide et efficace, cette astuce nécessite toutefois le placement d’un sélecteur CSS dans la structure de la page HTML ce qui n’est pas du tout élégant. Mais à défaut de l’élégance, le ClearFix reste simple d’utilisation et robuste à toute épreuve.

Enfin, il faudrait prendre en compte que clearfix est un nom de classe qu’on a mis par convention, vous êtes libre de la renommer à votre guise.

Répondre