Comment effacer les flottants en CSS ? Résumé de cinq méthodes pour effacer les flotteurs en CSS

Cet article vous présente comment effacer les flottants en CSS ? Un résumé des cinq méthodes pour effacer les flottants en CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Méthode 1 (utiliser une balise vide avec un attribut clair)

La balise peut être un div br　hr

Utilisez un élément vide tel que

après l'élément flottant et attribuez l'attribut .clear{clear:both;} en CSS pour effacer l'élément flottant. Vous pouvez également utiliser
ou

---

Avantages : simple, moins de code, bonne compatibilité avec les navigateurs.

Inconvénients : un grand nombre d'éléments html non sémantiques doivent être ajoutés, le code n'est pas assez élégant et il n'est pas facile à maintenir par la suite.

Ajoutez

.clear{ height:0px;font-size:0;clear:both;} sous l'élément flottant, mais sous ie6, Block les éléments ont une hauteur minimale, c'est-à-dire que lorsque height

Solution : font-size:0 ou overflow:hidden Ajoutez

La méthode 2 (ajout de l'attribut overflow à l'élément parent de l'élément flottant) résout l'inconvénient de devoir ajouter du code involontaire lors de la suppression des flotteurs via des éléments de balise vides.

Pour utiliser cette méthode, il vous suffit de définir la propriété CSS dans l'élément qui doit être débarrassé du flottant : overflow:auto

overflow:auto to; rendre la hauteur adaptative, zoom : 1 ; est pour la compatibilité avec IE6, et peut également être résolu avec height : 1%

Remarque : le zoom n'est pas conforme aux normes W3C ; overflow:hidden peut également être implémenté.

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

Méthode 3 : (Ajouter un flotteur au conteneur de l'élément flottant, c'est-à-dire ajouter un flotteur au parent pour effacer le flotteur)

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

Ajoutez l'attribut flottant au conteneur de l'élément flottant pour effacer le flottant interne.

Inconvénients : Cela le fera flotter dans son ensemble, affectant la mise en page, et n'est pas recommandé.

Méthode 4 : (Utiliser après le pseudo-objet pour effacer les flottants)

après le pseudo-élément (notez qu'il ne s'agit pas d'une pseudo-classe, mais un pseudo-élément, représentant un élément (les éléments les plus récents) et IEhack sont parfaitement compatibles avec les principaux navigateurs actuels. IEhack fait ici référence au déclenchement de hasLayout.

Ajoutez un élément de bloc invisible (élément Block) à la fin de l'élément pour nettoyer le flotteur à travers le pseudo-élément after.

Ajoutez un espace invisible "" ou un point "." à la fin de l'élément interne du conteneur via un pseudo-élément CSS, et attribuez l'attribut clear pour effacer le float. Il convient de noter que pour les navigateurs IE6 et IE7, un zoom:1 doit être ajouté à la classe clearfix pour déclencher haslayout.

après le pseudo-objet n'est pas pris en charge par le navigateur IE, il n'affecte donc pas le navigateur IE/WIN. Veuillez vous référer aux exemples suivants pour connaître les méthodes d'écriture spécifiques. Veuillez faire attention aux points suivants lors de l'utilisation.

1. Dans cette méthode, height:0 doit être défini pour le pseudo-objet qui doit effacer l'élément flottant, sinon l'élément sera plusieurs pixels plus haut que l'élément réel

2 ; . L'attribut content est obligatoire , mais sa valeur peut être vide. Lors de la discussion sur cette méthode, la valeur de l'attribut content est définie sur ".",

<style type="text/css"> 
.listinfo:after{
      display:block;
      clear:both;
      content:"";  
      visibility:hidden;
      height:0;
} 
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

Méthode 5 : utiliser des éléments adjacents pour traiter <.>

Ne rien faire, ajoutez l'attribut clear à l'élément après l'élément flottant. La méthode

est similaire à l'ajout d'une balise vide, sauf que l'élément immédiatement adjacent à l'élément flottant est

Utilisation :

Utilisez la méthode du pseudo-élément :after dans la mise en page principale de la page Web et utilisez-la comme moyen principal de nettoyer les flottants

Utilisez overflow:hidden dans les petits modules tels que ul (pay); attention aux éventuels problèmes d'éléments de débordement cachés);

S'il s'agit d'un élément flottant, le flotteur interne peut être automatiquement effacé sans traitement spécial

Utilisez les éléments adjacents dans le texte pour effacer le flotteur précédent ; .

Utilisez la méthode du pseudo-élément :after relativement parfaite pour nettoyer les flottants, et la structure du document est plus claire

Correction de BUG :

(1) , bug de double marge Une autre chose à retenir lorsque vous utilisez IE6 est que définir des marges dans la même direction que le flottant entraînera des

doubles marges.

Correction rapide : définissez display:inline; sur le float et ne vous inquiétez pas, c'est toujours un élément au niveau du bloc.

(2), un espacement de 3 pixels signifie que le texte à côté de l'élément flottant sera expulsé comme par magie de 3 pixels, comme s'il y avait un étrange champ de force autour de l'élément flottant.

Correction rapide : définissez la largeur ou la hauteur du texte concerné.

(3) Dans IE7, le bug de la marge inférieure est que lorsqu'un élément parent flottant a des éléments enfants flottants, la marge inférieure de ces éléments enfants sera ignorée par l'élément parent.

Correction rapide : utilisez plutôt le remplissage inférieur de l'élément parent.

Recommandations associées :

Problèmes de positionnement en CSS : positionnement absolu, positionnement relatif, fixe et statique

Comment implémenter le flottement en CSS Emballage d'éléments

Qu'est-ce que float ? Le principe de la compensation CSS float

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!