Comment supprimer les flottements (Clearfix)

Apprenez à utiliser la technique clearfix pour supprimer les flottements.

Technique clearfix

Si un élément est plus haut que l'élément qui le contient et qu'il flotte, il débordera 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

Tant que vous pouvez contrôler les marges extérieures et intérieures,overflow: auto; L'effet de suppression des flottements est bon (sinon, vous pourriez voir la barre de défilement).

Cependant, la nouvelle et moderne technique clearfix est plus sécurisée, la plupart des pages web utilisent le code suivant :

Exemple

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

Essayer par vous-même

Pages connexes

Tutoriel :Glisser CSS