Clear, Clearfix – Hack CSS et éléments flottants

Article Clearfix Dernière mise à jour le 18 avril 2013 à 10h52

Qui ne s’est jamais arraché les cheveux devant un comportement dit de “flux” qui vous dépasse totalement ? Une structure composée de blocs qui se chevauchent les uns les autres alors qu’ils sont censés être séparés. Nous allons tenter de donner un sens à ces comportements en abordant pour commencer la philosophie de flux naturel.

Comprendre le fonctionnement du flux à travers float

On appelle flux naturel la logique d’agencement des éléments dans un environnement physique. Dans une structure HTML, nous avons deux types d’éléments visibles :

  • block (div, h1-h6, p, ul, form, ...)
  • inline (span, a, strong, em, img, br, ...)

Le flux naturel positionne donc ces éléments les uns à la suite des autres. On notera toutefois une différence de position entre les deux types d’éléments.

Exemple d’éléments de type inline et bloc dans le flux naturel
L’image montre le comportement des éléments HTML au niveau de leur positionnement, les deux éléments de type bloc sont l’un en-dessous de l’autre, alors que les deux éléments de type inline sont côte-à-côte.

 

Ce flux naturel se comporte de manière totalement immuable, il est imperturbable, et gare à ceux qui veulent tricher ! C’est un peu ce que l’on fait lorsque qu’on utilise la propriété CSS float, on sort du flux.

Un element de type bloc en float, il sort du flux naturel
Ici, le bloc marron est un flottant et n’est donc plus reconnu dans le flux. D’une certaine manière, “il n’existe plus”. Il passe donc par dessus le bloc orange (z-index), qui lui, prend logiquement la place initiale du bloc marron (ce qui explique qu’on ne le voit plus).

Clear : une alternative aux problèmes causés par les flottants

Une propriété appelée clear a été implémentée lorsque la spécification CSS1 a vu le jour, le 17 décembre 1996. Appliquée à l’élément en-dessous du flottant, elle permet à ce dernier de rester sous l’influence du flux. On simule alors une restitution du flux naturel

Exemple d’éléments avec Clear both
Un clear:both; est appliqué au bloc orange se trouvant sous le bloc marron (flottant), le rendu final est le même qu’au début, cela donne l’impression que le flux naturel reprend ses droits. A noter que la propriété clear peut prendre plusieurs valeurs. Pour remettre dans le flux les éléments flottants de gauche “left”, pour les éléments de droite “right” et pour remettre les éléments des deux côtés, “both”. De façon générale, on utilise both pour être plus complet en cas de changement de structure. On s’assure ainsi de remettre dans le flux tous les éléments flottants du groupe.

 

Avec l’évolution des langages et des techniques (CSS2, CSS3, HTML5, …), il s’est avéré que dans certaines situations, l’utilisation d’un attribut clear manque à son devoir. Heureusement, plusieurs variantes ont été trouvées pour combler ces brèches.

Mais revenons à notre structure et utilisons une configuration avec plusieurs flottants. Les éléments qui suivent se trouvant dans le flux naturel se positionnent dans l’espace restant entre les flottants, sous reverse de place. Auquel cas, les parties excédantes passeront sous les flottants.

 

Réitérer l’opération précédente ne résoudrait pas le problème du fait que cet élément est de type inline. Il faudrait d’une part le transformer en block, mais aussi lui spécifier une largeur car il prendra automatiquement la largeur de son conteneur, ce qui peut engendrer des soucis d’affichage avec certaines structures plus complexes.

Pour résoudre le problème, énormément de développeurs utilisent la méthode traditionnelle qui consiste à ajouter un bloc (br, div, …) contenant la propriété clear:both; sous les flottants :


Nous vous rappelons qu’un simple clear:both sur un élément de type block et non inline aurait suffit.

 

Cette technique est simple et fonctionne la plupart du temps et notre structure est relativement intelligible, mais vous serez amenés à réaliser des structures de flottants avec plusieurs niveaux d’imbrications tout en rendant les éléments extensibles. Et plus la structure est complexe, moins son comportement est prévisible.


Vous remarquez que le bloc rose, bien qu’il se trouve autour de tous les éléments, ne tient pas compte du bloc vert car celui-ci sort du flux. Je vous invite à regarder notre page d’exemple, amusez-vous à redimensionner votre navigateur, constatez le comportement des blocs.

 

Pour y remédier, on pourrait procéder de la même manière que précédemment, à savoir rajouter encore un bloc en clear:both, mais c’est là le principal problème des développeurs, ils abusent de cette technique et se retrouvent avec une quantité d’éléments HTML “vides” exorbitante. Pour rappel, le HTML est censé structurer les données et le CSS les formater pour l’afficher. Utiliser un bloc HTML pour de l’affichage n’est donc pas optimal.

Inutile donc dans ces cas là de parler d’optimisation (accessibilité, poids, lisibilité… = qualité). D’autant plus qu’une méthode plus robuste existe…

Quand le duo : “after + overflow” devient “clearfix”

Contrairement à clear:both; la technique qui va suivre n’est pas une propriété CSS mais simplement le libellé d’une classe communément appelée clearfix, contenant un grand nombre de propriétés CSS. Elle résulte d’une fusion évolutive entre overflow:hidden; et la pseudo-classe :after.

 

Nous appliquons la classe .clearfix au bloc contenant les flottants :


Vous constatez que le bloc rose étant doté de la classe clearfix englobe dorénavant tous les éléments, y compris le bloc vert contrairement à l’exemple précédent. Elle génère un bloc invisible de façon à éviter le dépassement des éléments flottants qu’elle contient.

 

Ce qu’il faut retenir pour que cette méthode fonctionne : “Il faut englober le ou les flottant(s) d’un bloc possédant la classe clearfix”.

Plusieurs méthodes existent pour rétablir le flux après des float, chacune avec ses spécificités, ses avantages et ses inconvénients :

  • Avec la propriété clear:both; sur l’élément sous le flottant
  • Avec la propriété overflow:hidden;
  • Avec la pseudo-class :after
  • Avec un parent ayant les propriétés width:100%; et float:left; ou float:right;

Conclusion :

Nous ne retiendrons que clearfix que je recommande d’utiliser. En effet cette méthode est à ce jour la plus robuste et la plus aboutie.

Dans de rares cas, il sera plus judicieux d’utiliser une autre méthode, cela dépendra de beaucoup de paramètres qu’il n’est pas possible de recenser puisque le flux naturel possède un comportement difficilement prédictible. Dites-vous simplement que dans 90% des situations, l’appel de cette classe suffira à résoudre vos problèmes de flottants.

Clear, Clearfix - Hack CSS et éléments flottants, 4.7 out of 5 based on 3 ratings

Commentaires

#1
skinO

Moi qui en avait marre d’utiliser clear both et de créer des blocs vide, clearfix est parfait ! Je ne connaissais cette solution et ça m’arrange la vie c’est gé-ni-al !

Réagissez à cet article

Données obligatoires