Yann "Bug" Dubois

Le système du “clearfix” est une astuce bien connue des intégrateurs web pour résoudre le problème des éléments dans une page HTML qui ont tendance à se chevaucher parce que certains contenus flottants “débordent” du bloc censé les contenir. Sans entrer dans les détails, certains blocs de contenus ne “prennent” pas automatiquement la taille des éléments qu’ils contiennent, ce qui cause (en apparence) le non-respect des marges entre éléments adjacents.

Je ne vais pas reprendre ici en détail les causes et les principes du clearfix qui sont des sujets largement traités par ailleurs sur le web, en français comme en anglais. Il existe plusieurs variantes de code standard à réutiliser pour ne pas avoir à ce soucier de ce “problème”.

Il y a cependant une façon simple de se passer complètement de ces “hacks” la plupart du temps : il s’agit tout simplement de remonter à la racine du problème et de se servir de la propriété overflow: hidden de l’élément contenant.

En effet, si certains contenus “débordent” de leur conteneur, c’est parce que la propriété overflow appliquée par défaut à tous les éléments est “visible“. Or la norme CSS spécifie clairement que le contenu peut être rendu à l’extérieur de la “boîte” qui le contient quand la propriété overflow est réglée sur “visible”. Il est donc logique que si rien ne vient contraindre la taille du “conteneur”, celui-ci prenne dans certains cas (quand le flux est “flottant”) une hauteur de zéro, et laisse tout simplement l’ensemble du contenu “déborder”.

Une solution habituelle est d’appliquer l’attribut “clear:both” à l’élément suivant dans le flux HTML pour éviter le chevauchement avec l’objet flottant non identifié (OFNI ) “échappé” de son conteneur.

Si l’on regarde plus en détail la spécification de cette fameuse propriété overflow, on se rend en fait compte qu’il suffit de la régler sur la valeur “hidden” pour éviter le problème du débordement. En effet, la norme CSS spécifie que quand overflow est réglé sur hidden, le contenu ne peut plus déborder de sa “boîte”. Or, si aucune contrainte n’a été imposée à la taille de cette “boîte”, elle va tout simplement adopter la taille de son contenu. Et le problème du contenu flottant en dehors de tout bloc s’évapore immédiatement.

Evidemment, si la taille du bloc conteneur est spécifiée ou imposée par le reste de la mise en page, alors le contenu qui “dépasse” va se retrouver coupé (clipped) et caché… En pratique, il est rare que ce soit un problème, car c’est précisément sur des éléments dont les dimensions ne sont pas spécifiées que l’on rencontre en général ces problèmes nécessitant le recours au clearfix.

A lire aussi, concernant la propriété overflow et la façon de l’appliquer au texte, mon autre article “limiter la taille des textes en hauteur”.