Comment effacer le flotteur en CSS3

CSS3 Clear Floats

Pendant le développement Web, les flotteurs sont une propriété CSS très courante utilisée pour la mise en page. Le flottement permet aux éléments d'échapper au flux du document et d'être placés librement sur la page selon les besoins. Mais le flottement présente également un problème, c'est-à-dire qu'il peut provoquer le chevauchement des éléments ou l'effondrement de la hauteur de l'élément parent. Pour résoudre ce problème, nous devons utiliser quelques astuces pour effacer les flotteurs.

1. Qu'est-ce que float

En CSS, float signifie flottant. C'est une méthode de positionnement des éléments. Lorsqu'un élément a l'attribut float défini, il sort du flux de documents et se déplace vers la gauche ou la droite jusqu'à ce que son bord extérieur touche le bord de son élément conteneur ou le bord d'un autre élément flottant.

2. Problèmes avec le flottement

Bien que le flottement permette aux éléments d'être placés librement, il peut également causer certains problèmes. Par exemple, les éléments flottants entraîneront l'effondrement de la hauteur de l'élément parent. Ce problème peut être résolu en définissant l'attribut overflow sur l'élément parent. Dans le même temps, le flottement entraînera également le chevauchement des éléments. Ce problème peut être résolu en utilisant l'attribut clear.

3. Méthodes d'effacement des flottants

1. Utilisez l'attribut clear

En CSS, l'attribut clear est utilisé pour effacer les attributs flottants. Il a quatre valeurs, à savoir gauche, droite, les deux et aucune. Parmi eux, gauche signifie effacer les flotteurs gauches, droite signifie effacer les flotteurs droits, les deux signifie effacer les flotteurs gauche et droit, et aucun signifie ne supprimer aucun flotteur.

Par exemple :

.clearfix { clear: both; }

Dans cet exemple, nous utilisons une classe clearfix pour effacer les flottants. En HTML, nous pouvons ajouter cette classe aux éléments qui doivent effacer les flottants :

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

2. Utiliser des éléments vides

En plus de l'attribut clear, nous pouvons également utiliser un élément vide pour effacer les flottants.

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div style="clear:both;"></div>
</div>

Dans cet exemple, nous utilisons un élément vide pour effacer le flottant. Cet élément n'apparaît pas sur la page, mais il occupera de l'espace sous l'élément flottant, empêchant ainsi le chevauchement et l'effondrement en hauteur de l'élément parent.

3. Utilisez le modèle de boîte

En CSS3, nous pouvons utiliser l'attribut box-sizing pour effacer le flottant. box-sizing a deux valeurs, à savoir content-box et border-box. Parmi eux, content-box signifie que la largeur et la hauteur de l'élément incluent uniquement la largeur et la hauteur du contenu, tandis que border-box signifie que la largeur et la hauteur de l'élément incluent la largeur et la hauteur du contenu et la largeur de la frontière.

Exemple :

.clearfix {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
}

Dans cet exemple, nous avons utilisé le dimensionnement de la boîte pour effacer les flottants. Puisque la border-box est définie, le remplissage et la bordure ne modifieront pas la taille de l'élément, évitant ainsi les problèmes de chevauchement d'éléments flottants et d'effondrement en hauteur des éléments parents.

4. Résumé

Grâce à l'introduction ci-dessus, nous comprenons ce qu'est le flottement et les problèmes causés par le flottement. Dans le même temps, nous avons également appris trois méthodes pour effacer les flottants, à savoir l'utilisation de l'attribut clear, l'utilisation d'éléments vides et l'utilisation du modèle de boîte. Dans les projets réels, nous pouvons choisir la méthode de dégagement des flotteurs appropriée en fonction de la situation réelle.

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!