Résumé des méthodes courantes pour effacer les flottants en CSS CSS efface les deux {overflow:auto;zoom:1;}

Il existe trois méthodes couramment utilisées pour effacer les flottants :

Il s'agit d'un code source flottant qui n'a pas été effacé et le code en cours d'exécution ne peut pas voir le parent. Éléments sur fond jaune clair.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Les trois méthodes de nettoyage des flotteurs sont les suivantes :

1 . Utilisez un flotteur clair d'étiquette vide. Méthode que j'utilise depuis longtemps, la balise vide peut être une balise p ou une balise P. J'ai l'habitude d'utiliser

, qui est assez court. Beaucoup de gens utilisent également

---

, mais il suffit d'effacer la bordure, mais en théorie, il peut s'agir de n'importe quelle étiquette. Cette méthode consiste à ajouter une telle étiquette pour effacer le flottant une fois que tous les éléments flottants à l'intérieur de l'élément parent flottant doivent être effacés, et à définir le code CSS correspondant : clear:both. L’inconvénient de cette approche est l’ajout d’éléments structurels dénués de sens.

C'est une pratique recommandée par le W3Cpour effacer les flottants (fermer les éléments flottants) à l'aide de balises supplémentaires. Quant à l'utilisation de l'élément
ou vide

, vous pouvez choisir selon vos propres préférences (bien sûr, vous pouvez également utiliser d'autres éléments au niveau du bloc). Cependant, il convient de noter que
lui-même a des performances, il aura un saut de ligne supplémentaire, sa hauteur doit donc être définie sur 0 pour masquer ses performances. Ainsi, dans la plupart des cas, il est plus approprié d’utiliser un

vide.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
<p class=”clr”> </p>
</p>

2. Utilisez l'attribut de débordement. Cette méthode résout efficacement l'inconvénient de devoir ajouter du code involontaire en effaçant les flottants à travers les éléments d'étiquette vides. Pour utiliser cette méthode, il vous suffit de définir la propriété CSS : overflow:auto dans l'élément qui doit être débarrassé du flottant, et c'est tout ! "zoom:1" est utilisé pour être compatible avec IE6, et width:100% peut également être utilisé.

Cependant, lors de l'utilisation du débordement, cela peut avoir un impact sur les performances de la page, et cet impact est incertain. Il est préférable de tester vos résultats sur plusieurs navigateurs Page ; 🎜>

3. Utilisez le pseudo-objet after pour effacer le flotteur.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Cette méthode n'est applicable qu'aux navigateurs nonIE. 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 la valeur réelle 2. L'attribut content est nécessaire, mais sa valeur peut être ; discussion idéale vide et bleue Dans cette méthode, la valeur de l'attribut content est définie sur ".", mais j'ai trouvé qu'il est également possible de le laisser vide.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Ces trois méthodes ont leurs propres avantages et inconvénients. Vous devez choisir la meilleure lorsque je les utilise personnellement. à la première méthode, qui est plus stable.

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!