Comment utiliser des pseudo-éléments pour effacer les flotteurs en CSS

Qu'est-ce que BFC ?

Le contexte de formatage au niveau du bloc est une zone de rendu indépendante qui isole les éléments à l'intérieur du BFC des éléments externes afin que le positionnement des éléments internes et externes ne s'affecte pas les uns les autres.

Commençons par comprendre un terme : BFC (block formatting context), qui signifie « contexte de formatage au niveau bloc » en chinois.

Rappelez-vous d'abord un principe :

Si un élément a un BFC, alors peu importe la façon dont les éléments internes montent et descendent, cela n'affectera pas les éléments externes. Par conséquent, il est impossible pour les éléments BFC d'avoir un chevauchement de marge, car le chevauchement de marge affectera les éléments externes. Les éléments BFC peuvent également être utilisés pour effacer l'impact du flottement, car s'ils ne sont pas effacés, les éléments enfants flottants entraîneront la hauteur du parent ; élément à réduire. , affectera inévitablement la disposition et le positionnement des éléments suivants, ce qui viole évidemment l'élément BFC. Les éléments enfants de l'élément n'affecteront pas le réglage des éléments externes.

(Tutoriel recommandé : Tutoriel CSS)

Les situations suivantes déclencheront BFC :

•100db36a723c770d327fc0aef2ce13b1Élément racine
•float La valeur n'est pas nulle
•La valeur du débordement est auto, scroll, caché
•La valeur de l'affichage est l'une des valeurs de table-cell, table-caption et inline--block
•La valeur de la position n'est pas relative et statique, c'est-à-dire position : absolue/fixe

Évidemment, lorsque nous définissons la valeur de débordement sur caché, l'élément conteneur a BFC, donc l'élément enfant flottant ne provoquera pas l'effondrement de la hauteur de l'élément parent.

Utiliser des éléments de pseudo-classe pour effacer les flottants :

.clearFix::after,.clearFix::before {
       display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
}
.clearFix { zoom: 1;}

Tutoriels vidéo associés recommandés : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!