Agencement CSS - clear et clearfix

Attribut clear

clear Cet attribut spécifie quels éléments peuvent flotter à côté de l'élément supprimé et de quel côté.

clear Cet attribut peut être configuré avec l'une des valeurs suivantes :

  • none - Les éléments flottants sont autorisés sur les deux côtés. Valeur par défaut
  • left - Les éléments flottants ne sont pas autorisés à flotter à gauche
  • right - Les éléments flottants ne sont pas autorisés à flotter à droite
  • both - Les éléments flottants ne sont pas autorisés à flotter à la fois à gauche et à droite
  • inherit - L'élément hérite de la valeur clear de son parent

Utilisation clear L'utilisation la plus courante de cet attribut est de l'utiliser sur l'élément float Après l'attribut.

Lorsque vous supprimez le flottement, vous devez correspondre à la suppression et au flottement : si un élément flotte vers la gauche, supprimez alors la gauche. Vos éléments flottants continueront à flotter, mais les éléments supprimés seront affichés en dessous.

L'exemple suivant supprime le flottement vers la gauche. Cela signifie que les éléments flottants ne sont pas autorisés à apparaître à gauche du (div) :

Exemple

div {
  clear: left;
}

Essayer par vous-même

Hack clearfix

Si un élément est plus haut que l'élément qui le contient et qu'il est flottant, il débordera au-delà de son conteneur :

Ensuite, nous pouvons ajouter overflow: auto; à l'élément conteneur pour résoudre ce problème :

Exemple

.clearfix {
  overflow: auto;
}

Essayer par vous-même

Si vous pouvez contrôler les marge extérieure et intérieure (sinon vous pourriez voir une barre de défilement), overflow: auto clearfix fonctionnera bien. Cependant, la nouvelle technologie moderne clearfix est plus sécurisée, et le code suivant est appliqué à la plupart des sites :

Exemple

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Essayer par vous-même

Vous apprendrez cela dans les chapitres suivants ::after Éléments pseudo