Vor- und Nachteile von sieben Methoden zur Verwendung von CSS zum Löschen von Floats

1, Definition des übergeordneten p Höhe

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

Prinzip: Das übergeordnete p definiert die Höhe manuell, wodurch das Problem gelöst wird, dass das übergeordnete p die Höhe nicht automatisch erhalten kann.

Vorteile: einfach, weniger Code, leicht zu beherrschen

Nachteile: Nur für Layouts mit fester Höhe geeignet, es treten Probleme auf, wenn die Höhe von der übergeordneten Höhe abweicht p

Empfehlung: Nicht empfohlen, 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} 
.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>

Prinzip: Fügen Sie ein leeres p hinzu und verwenden Sie clear:both, das durch CSS verbessert wurde, um den Float zu löschen, sodass das übergeordnete p automatisch die Höhe erhalten kann

Vorteile: Einfach, weniger Code, gute Browserunterstützung, nicht anfällig für Seltsamkeiten Problem

Nachteile: Viele Anfänger verstehen das Prinzip nicht; wenn die Seite zu viele schwebende Layouts hat, werden viele leere PS hinzugefügt, was den Leuten ein schlechtes Gewissen macht

Vorschläge: Es wird nicht empfohlen, aber diese Methode ist eine klare Float-Methode, die hauptsächlich vor

3 verwendet wurde, übergeordnete p-Definition Pseudoklasse :nachher und 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>

Prinzip: Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after Das Prinzip ähnelt etwas der Methode 2. Zoom (IE-Übertragung hat Attribut) kann ie6- und IE7-Floating-Probleme lösen

Vorteile: gute Browserunterstützung, nicht anfällig für seltsame Probleme (derzeit: wird von großen Websites wie Tengxun, NetEase, Sina usw. verwendet). )

Nachteile: Viele, viele Anfänger verstehen das Prinzip nicht. Sie müssen zwei Codezeilen in Kombination verwenden, um von Mainstream-Browsern unterstützt zu werden.

Empfehlung: Empfohlene Verwendung. Es wird empfohlen, öffentliche Klassen zu definieren, um den CSS-Code zu reduzieren.

4, übergeordnetes p definiert Überlauf: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>

Prinzip: Breite oder Zoom:1 müssen definiert werden, und die Höhe kann nicht gleichzeitig definiert werden. Bei Verwendung von overflow:hidden überprüft der Browser automatisch die Höhe des schwebenden Bereichs

Vorteile: einfach, weniger Code, gute Browserunterstützung

Nachteil: kann nicht in Verbindung mit verwendet werden position, weil der Überschuss Die Größe wird ausgeblendet.

Empfehlung: Nur für Freunde empfohlen, die Position noch nicht verwendet haben oder ein tiefes Verständnis für overflow:hidden haben.

5, übergeordnetes p definiert 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>

Prinzip: Breite oder Zoom:1 müssen definiert werden, Höhe kann nicht definiert werden, wenn overflow:auto verwendet wird Überprüfen Sie die Höhe des schwebenden Bereichs

Vorteile: einfach, weniger Code, gute Browserunterstützung

Nachteil: Wenn die interne Breite und Höhe das übergeordnete p überschreiten, wird eine Bildlaufleiste angezeigt.

Empfehlung: Nicht empfohlen. Verwenden Sie es, wenn Bildlaufleisten angezeigt werden sollen oder um sicherzustellen, dass Bildlaufleisten nicht in Ihrem Code angezeigt werden.

6, das übergeordnete p schwebt auch zusammen

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

Prinzip: Alle Codes schweben zusammen und werden zu einem Ganzen

Vorteile: Keine Vorteile

Nachteile : Es werden neue Floating-Probleme auftreten.

Empfehlung: Nicht empfohlen, nur zum Verständnis.

7, übergeordnetes p definiert 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>

Prinzip: p-Attribut in table ändern

Vorteile: Keine Vorteile

Nachteile: Es entstehen neue unbekannte Probleme.

Empfehlung: Nicht empfohlen, nur zum Verständnis.

8, fügen Sie am Ende das br-Tag hinzu, clear:both

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

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