Teilen Sie mehrere CSS-Methoden zum Löschen von Floats

In diesem Artikel werden hauptsächlich verschiedene Methoden zum Löschen von Floats in CSS vorgestellt, in der Hoffnung, Ihnen dabei zu helfen.

1. Das übergeordnete p definiert die Höhe

<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>

Das übergeordnete p definiert die Höhe manuell, wodurch das Problem gelöst wird, dass das übergeordnete p die Höhe nicht automatisch ermitteln kann (nur für Layouts mit fester Höhe empfohlen). )

2. Fügen Sie am Ende ein leeres p-Tag hinzu, 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. Übergeordnetes p definiert Pseudoklassen: after und 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>

Wird nur von IE8 und höher sowie Nicht-IE-Browsern unterstützt: Danach kann Zoom (dh proprietäres Attribut) das Floating-Problem von IE6 und IE7 lösen

4. Überlauf der übergeordneten p-Definition: ausgeblendet

<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. Übergeordnetes Element: Überlauf: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. Übergeordnetes p schwebt auch zusammen

<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>

Alle Codes floaten zusammen, neue Floats werden generiert, nur zum Verständnis

7. Parent p definiert 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>

Ändern Sie die Attribute von p in eine Tabelle

8. Fügen Sie das br-Tag clear:both am Ende von

<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>

Das übergeordnete p hinzu Definiert Zoom: 1, um das Problem des IE-Floating-Problems zu lösen. Fügen Sie am Ende das br-Tag „clear“ hinzu: Both

Verwandte Empfehlungen:

Informationen zur CSS-Clearing-Floating-Methode

CSS-Clearing-Floating-Methoden

Was sind die Methoden und Vor- und Nachteile des Clearings von Floats?

Das obige ist der detaillierte Inhalt vonTeilen Sie mehrere CSS-Methoden zum Löschen von Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!