So löschen Sie Floats mit CSS

Dieser Artikel stellt hauptsächlich vor, wie man CSS zum Löschen von Floating-Methoden verwendet. Jetzt kann ich ihn mit Ihnen teilen.

Anzeigeeffekte in verschiedenen Browsern auch anders sein, was das Löschen von Floats erschwert. Der Test wurde bestanden. IE Chrome Firefox Opera Freunde in Not können sich auf

konzentrieren . Eine Funktion, die ein Lehrer beherrschen muss. CSS Clear Float Enzyklopädie, insgesamt 8 Methoden.
Floating führt dazu, dass die aktuelle Beschriftung nach oben schwebt, und wirkt sich auch auf die Position der vorderen und hinteren Beschriftung, der übergeordneten Beschriftung und des Breiten-Höhe-Attributs aus. Darüber hinaus kann derselbe Code in verschiedenen Browsern unterschiedlich angezeigt werden, was das Löschen von Floats erschwert. Es gibt mehrere Möglichkeiten, durch Floats verursachte Probleme zu lösen, einige haben jedoch Probleme mit der Browserkompatibilität.
Im Folgenden werden 8 Methoden zum Löschen von Floats zusammengefasst (der Test wurde bestanden, d. h. Chrome Firefox Opera, die nächsten drei Methoden dienen nur zum Verständnis):
1 Das übergeordnete p definiert die 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. Wenn die Höhe vom übergeordneten p abweicht, treten Probleme auf.
Vorschlag: Nein Empfohlene Verwendung, es wird nur empfohlen,
2 für Layouts mit fester Höhe zu verwenden. 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 das klare: beide wurden durch CSS verbessert, um den Float zu löschen, let Das übergeordnete p kann die Höhe automatisch abrufen
Vorteile: einfach, weniger Code, gute Browserunterstützung, nicht anfällig für seltsame Probleme
Nachteile: Viele Anfänger verstehen das Prinzip nicht; Wenn die Seite viele Floating-Layouts hat, muss sie hinzugefügt werden. Es gibt viele leere PS, was den Leuten ein sehr schlechtes Gefühl gibt
Empfehlung: Nicht empfohlen, aber diese Methode wurde in der Vergangenheit hauptsächlich zum Löschen von Floats verwendet
3 . Das übergeordnete p definiert Pseudoklassen: after 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 in gewisser Weise der Methode 2. Zoom (IE-Konvertierung hat Attribute) kann das schwebende Problem von ie6 und ie7 lösen
Vorteile: Gute Browserunterstützung, nein Es ist anfällig für seltsame Probleme (derzeit: wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet)
Nachteile: Viel Code, viele Anfänger verstehen das Prinzip nicht, zwei Codezeilen müssen kombiniert werden, um das Mainstream-Browsen zu ermöglichen. Alle Geräte unterstützen es.
Empfehlung: Es wird empfohlen, öffentliche Klassen zu definieren, um den CSS-Code zu reduzieren.
4. Das übergeordnete p definiert overflow: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, Höhe kann nicht definiert werden. Bei Verwendung von overflow:hidden überprüft der Browser automatisch die Höhe von der schwebende Bereich
Vorteile: einfach, weniger Code, gute Browserunterstützung
Nachteile: kann nicht mit Position verwendet werden, da die überschüssige Größe ausgeblendet wird.
Empfehlung: Nur für Freunde empfohlen, die Position noch nicht verwendet haben oder ein tiefes Verständnis von 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. Bei Verwendung von overflow:auto überprüft der Browser automatisch die Höhe schwebender Bereich
Vorteile: Einfach, weniger Code, gute Browserunterstützung
Nachteile: Wenn die interne Breite und Höhe das übergeordnete p überschreiten, werden Bildlaufleisten 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 schwimmt 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 treten neue Floating-Probleme auf.
Empfehlung: Nicht zur Verwendung empfohlen, nur zum Verständnis.
7, das übergeordnete 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: Verwandeln Sie das p-Attribut in eine Tabelle
Vorteile: Keine Vorteile
Nachteile: Wird neue unbekannte Probleme schaffen.
Empfehlung: Nicht zur Verwendung empfohlen, nur zum Verständnis.
8, fügen Sie am Ende das br-Tag clear:both hinzu

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

Prinzip: Das übergeordnete p definiert zoom:1, um das IE-Floating-Problem zu lösen, fügen Sie am Ende das br-Tag clear:both hinzu
Empfehlung: Nicht empfohlen. Nur zum Verständnis verwenden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

css Erläuterung des Hintergrunds: transparent in

Erklärung des CSS-Mauscursors

Das obige ist der detaillierte Inhalt vonSo löschen Sie Floats mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!