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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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!
