Plusieurs façons d'effacer les flotteurs en CSS

Plusieurs méthodes d'effacement des flottants en CSS

En CSS, les éléments flottants sont une méthode de mise en page fréquemment utilisée, mais les éléments flottants peuvent également causer des problèmes tels que l'effondrement en hauteur des éléments parents et le débordement des éléments enfants, vous devez donc utiliser des méthodes d'effacement flotte.

Voici quelques moyens pratiques d'effacer les flottants :

1. Utilisez l'attribut clear

L'attribut clear peut définir l'état flottant d'un élément. Il a les valeurs suivantes :

1. clear : aucun (valeur par défaut) Indique. que l'élément n'efface pas le flottant ;
2. clear : left signifie que l'élément flottant gauche n'est pas autorisé sous l'élément, c'est-à-dire que l'élément flottant gauche est effacé
3. clear : right signifie que l'élément flottant droit n'est pas autorisé ; sous l'élément, c'est-à-dire que le flotteur droit est effacé ;
4. clear : les deux signifient qu'aucun élément flottant n'est autorisé en dessous de l'élément, c'est-à-dire que les flotteurs gauche et droit sont effacés en même temps

Par exemple : le code suivant implémente un effet de suppression des flottants :

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div style="clear:both;"></div>
</div>

Dans le code ci-dessus, nous ajoutons une balise div vide à la dernière ligne, puis définissons la valeur de l'attribut clear de son style sur la largeur et la hauteur de l'élément. ne sont pas définis, il s'agit simplement d'une balise vide, cela n'affectera donc pas la mise en page, mais cela peut effacer l'effet flottant.

Améliorez le code ci-dessus et extrayez la balise div vide dans une classe. Le code est le suivant :

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

Dans le code ci-dessus, nous ajoutons height: 0; balise div vide Pour que cela n’affecte pas la mise en page.

2. Utiliser des pseudo-éléments

En CSS3, vous pouvez utiliser des pseudo-éléments pour effacer l'effet flottant, comme indiqué ci-dessous :

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

Dans le code ci-dessus, nous avons ajouté une classe clearfix à l'élément parent et utilisé le pseudo-élément : après Effacez l'effet flottant en définissant content: ''; display: table; et clear: Both;

3. Utilisez l'attribut overflow

Définir l'attribut overflow de l'élément parent sur masqué, auto ou scroll peut également effacer le flottant, comme indiqué ci-dessous :

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

Les trois paramètres de style ci-dessus peuvent effacer le flottant, mais lorsque le la hauteur de l'élément flottant dépasse Lorsque l'élément parent est utilisé, des barres de défilement apparaîtront, affectant la beauté et la convivialité de la page.

4. Utilisez BFC (contexte de formatage au niveau du bloc)

Lorsqu'un élément a l'attribut BFC, il enveloppera l'élément flottant à l'intérieur pour obtenir l'effet d'effacer le flottant. La syntaxe de BFC est la suivante :

.element {
  display: block; /* 块级元素 */
  overflow: auto; /* 触发BFC */
}

. Dans le code ci-dessus, nous définissons l'attribut display:block; overflow:hidden; ou overflow:auto; sur l'élément à effacer et à flotter, déclenchant ainsi l'effet BFC.

En résumé, nous pouvons choisir différentes méthodes de nettoyage des flotteurs en fonction des besoins réels pour obtenir des effets de mise en page magnifiques et raisonnables.

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!