Comment effacer les flotteurs en utilisant CSS

Cet article présente principalement comment utiliser CSS pour effacer les méthodes flottantes. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Effets d'affichage dans divers navigateurs. également être différent, ce qui rend la suppression des flottants plus difficile. Voici 8 façons d'effacer les flottants. Le test a réussi IE Chrome Firefox Opera Les amis dans le besoin peuvent se référer à

La suppression des flottants est la conception de chaque réception Web. Une fonction qu'un enseignant doit maîtriser. Encyclopédie CSS Clear Float, un total de 8 méthodes.
Flottant fera flotter l'étiquette actuelle vers le haut et affectera également la position des étiquettes avant et arrière, l'étiquette parent et l'attribut largeur hauteur. De plus, le même code peut s'afficher différemment dans différents navigateurs, ce qui rend la suppression des flottants plus difficile. Il existe plusieurs façons de résoudre les problèmes causés par les flotteurs, mais certaines ont des problèmes de compatibilité avec les navigateurs.
Ce qui suit résume 8 méthodes pour effacer les flotteurs (le test a réussi, c'est-à-dire Chrome Firefox Opera, les trois méthodes suivantes sont juste pour la compréhension) :
1, le parent p définit la hauteur

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : le parent p définit manuellement la hauteur, ce qui résout le problème selon lequel le parent p ne peut pas obtenir automatiquement la hauteur.
Avantages : simple, moins de code, facile à maîtriser
Inconvénients : convient uniquement aux aménagements à hauteur fixe. Une hauteur précise doit être indiquée. Si la hauteur est différente de celle du p parent, des problèmes surviendront
Suggestion : Non Il est recommandé d'utiliser
2 uniquement pour les mises en page à hauteur fixe, et d'ajouter une balise p vide clear:both à la fin

<style type="text/css"> 
.p1{background:#000080;border:1px solid red} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<p class="clearfloat"></p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : ajouter un p vide et utiliser clear : tous deux améliorés par CSS pour effacer le float , permettant au parent p d'obtenir automatiquement la hauteur
Avantages : simple, moins de code, bon support du navigateur, non sujet à des problèmes étranges
Inconvénients : de nombreux débutants ne comprennent pas le principe ; si la page a beaucoup de mises en page flottantes, c'est très dommage d'ajouter beaucoup de ps vides
Recommandation : ce n'est pas recommandé, mais cette méthode est une méthode d'effacement des flottants qui était principalement utilisée dans le passé
3. Le parent p définit les pseudo-classes : after et zoom

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<p class="p1 clearfloat"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : seuls les navigateurs IE8 et supérieurs et non-IE prennent en charge :after Le principe est quelque peu similaire à la méthode 2. Zoom (conversion IE. a des attributs) peut résoudre le problème flottant d'ie6 et ie7
Avantages : Navigateur Bon support, pas sujet à des problèmes étranges (actuellement : utilisé par les grands sites Web, tels que : Tengxun, NetEase, Sina, etc.)
Inconvénients : Il existe de nombreux codes, de nombreux débutants ne comprennent pas le principe et deux phrases de code doivent être utilisées en combinaison. Ce n'est qu'alors que tous les principaux navigateurs pourront le prendre en charge.
Recommandation : Il est recommandé de l'utiliser. Il est recommandé de définir des classes publiques pour réduire le code CSS.
4. Le parent p définit overflow:hidden

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : width ou zoom:1 doivent être définis, et la hauteur ne peut pas être définie. Lors de l'utilisation de overflow:hidden, le navigateur vérifiera automatiquement le. zone flottante Hauteur
Avantages : simple, moins de code, bonne prise en charge du navigateur
Inconvénients : ne peut pas être utilisé avec la position, car la taille dépassée sera masquée.
Recommandation : recommandé uniquement aux amis qui n'ont pas utilisé la position ou qui ont une compréhension approfondie du débordement : caché.
5, parent p définit overflow:auto

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : la largeur ou le zoom :1 doit être défini et la hauteur ne peut pas être définie. Lors de l'utilisation de overflow:auto, le navigateur vérifiera automatiquement le flottant. zone Hauteur
Avantages : simple, moins de code, bonne prise en charge du navigateur
Inconvénient : lorsque la largeur et la hauteur internes dépassent le p parent, des barres de défilement apparaissent.
Recommandation : Non recommandé, utilisez-le si vous avez besoin que des barres de défilement apparaissent ou pour vous assurer que les barres de défilement n'apparaissent pas dans votre code.
6, le parent p flotte également ensemble

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : tous les codes flottent ensemble et deviennent un tout
Avantages : aucun avantage
Inconvénients : de nouveaux flotteurs seront générés en question.
Recommandation : utilisation non recommandée, juste pour comprendre.
7. Le parent p définit display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : transformer l'attribut p en table
Avantages : aucun avantage
Inconvénients : créera de nouveaux problèmes inconnus .
Recommandation : utilisation non recommandée, juste pour comprendre.
8, ajoutez la balise br clear:both à la fin

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.p2{background:#800080;border:1px solid red;height:100px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<br class="clearfloat" /> 
</p> 
<p class="p2"> 
p2 
</p>

Principe : Le parent p définit zoom:1 pour résoudre le problème flottant d'IE, ajoutez la balise br clear:both à la fin
Suggestions : Utilisation non recommandée, juste pour comprendre.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

css Explication de l'arrière-plan : transparent

Explication du curseur de style souris 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!