CSS hack clear et clearfix

La propriété CSS clear

La propriété clear spécifie ce qui doit se passer avec l'élément qui est à côté d'un élément flottant.

La propriété clear empêche les éléments de s'enrouler autour ou à côté du contenu flottant.

Cette propriété peut avoir l'une des valeurs suivantes :

  • none - Par défaut. Permet aux éléments de flotter de chaque côté.
  • left - L'élément est poussé en dessous des éléments flottants à gauche.
  • right - L'élément est poussé en dessous des éléments flottants à droite.
  • both - L'élément est poussé en dessous des éléments flottants des deux côtés.
  • inherit - L'élément hérite de la valeur clear de son parent.

Exemple

Ici, clear: left; pousse div2 en dessous du div1 flottant, sur son côté gauche :

div1 {
float: left;
}

div2 {
clear: left;
}
Essayez-le vous-même »

Le hack clearfix CSS

Si un élément flottant est plus haut que son conteneur, il "débordera" en dehors de celui-ci. Nous pouvons alors ajouter un hack clearfix pour résoudre ce problème :

Sans Clearfix

Avec Clearfix

Le hack clearfix implique le pseudo-élément ::after , et est utilisé pour s'assurer que le conteneur parent enferme correctement ses éléments enfants flottants :

Exemple

.clearfix::after {
content: "";
clear: both;
display: table;
}
Essayez-le vous-même »

Exemple expliqué :

  • .clearfix::after - Cible un pseudo-élément généré après le contenu de tout élément avec class="clearfix".
  • content: "" - Assure que le pseudo-élément est rendu, même s'il n'a pas de contenu visible.
  • clear: both - Cela efface les flottants gauche et droit, poussant ainsi tout contenu suivant en dessous des éléments flottants, et force le conteneur parent à s'étendre pour les inclure.
  • display: table - Cela crée un nouveau contexte de formatage de bloc, ce qui aide à contenir les flottants.

Vous en apprendrez plus sur le pseudo-élément ::after dans un chapitre ultérieur.

Propriétés CSS

Propriété Description
clear Spécifie ce qui doit se passer avec l'élément qui est à côté d'un élément flottant.
float Spécifie si un élément doit flotter à gauche, à droite, ou pas du tout.