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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
