Partagez plusieurs méthodes CSS pour effacer les flottants-tutoriel CSS-php.cn

Partagez plusieurs méthodes CSS pour effacer les flottants

小云云

Libérer： 2018-02-28 10:58:49

original

1337 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

添加一个空p，利用css提高的clear：both清除浮动，让父级p自动获取高度（以前使用的较多）

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!