Partagez plusieurs méthodes CSS pour effacer les flottants

Cet article partage principalement avec vous plusieurs méthodes pour effacer les flottants en CSS, en espérant vous aider.

1. Le parent p définit la hauteur

<style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;}
    .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>

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 (uniquement recommandé pour les mises en page à hauteur fixe )

2. Ajoutez une balise p vide à la fin clear:both

<style type="text/css"> .p1{background:#000080;border:1px solid red}
    .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，利用css提高的clear：both清除浮动，让父级p自动获取高度（以前使用的较多）

3. Parent p définit les pseudo-classes : after et zoom

<style type="text/css"> .p1{background:#000080;border:1px solid red;}
    .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>

Uniquement pris en charge par IE8 et supérieur et les navigateurs non-IE : après, le zoom (c'est-à-dire l'attribut propriétaire) peut résoudre le problème flottant de IE6 et IE7

4. Débordement de définition parent p : caché

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;overflow:hidden}
    .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>

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

5. Définition du parent : overflow:auto

<style type="text/css"> .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
    .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>

必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

6. Parent p flotte également ensemble

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left}
    .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>

Tous les codes flottent ensemble, de nouveaux flottants seront générés, à des fins de compréhension uniquement

7. Parent p définit display:table

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;display:table;margin-bottom: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>

Changez les attributs de p dans un tableau

8. Ajoutez la balise br clear:both à la fin de

<style type="text/css"> .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
    .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>

Le parent p définit zoom : 1 pour résoudre le problème du problème flottant IE, ajoutez la balise br clear à la fin : les deux

Recommandations associées :

À propos de la méthode de suppression des flotteurs CSS

Méthodes flottantes de compensation CSS

Quelles sont les méthodes, avantages et inconvénients de la compensation des flottants

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!