Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)
|
1. Übergeordnetes Div definiert Pseudoklassen: after und zoom
<style type="text/css">
.div1{Hintergrund:#000080;Rand:1px durchgehend rot;}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Rand oben:10px}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
/*Floating-Code löschen*/
.clearfloat:nach{Anzeige:Block;Clear:Both;Inhalt:"";Sichtbarkeit:versteckt;Höhe:0}
.clearfloat{zoom:1}
</Stil>
<div Klasse="div1 Clearfloat">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after. Das Prinzip ist ähnlich wie bei Methode 2. Zoom (IE-Konvertierung hat Attribute) kann das Floating-Problem von IE6 und IE7 lösen. Vorteile: gute Browserunterstützung, weniger wahrscheinlich, dass merkwürdige Probleme auftreten (derzeit: wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet) Nachteile: Es gibt zu viele Codes und viele Anfänger verstehen das Prinzip nicht. Zwei Codes müssen zusammen verwendet werden, damit Mainstream-Browser es unterstützen. Empfehlung: Um den CSS-Code zu reduzieren, wird empfohlen, gemeinsame Klassen zu definieren. Bewertung: ★★★★☆ 2. Fügen Sie am Ende ein leeres Div-Tag clear:both hinzu
<style type="text/css">
.div1{Hintergrund:#000080;Rand:1px durchgehend rot}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Rand oben:10px}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
/*Floating-Code löschen*/
.clearfloat{clear:both}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
<div Klasse="clearfloat"></div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Fügen Sie ein leeres Div hinzu und verwenden Sie die Methode clear:both in CSS, um den Float zu löschen, damit das übergeordnete Div automatisch die Höhe erhält Vorteile: einfach, weniger Code, gute Browserunterstützung, weniger wahrscheinlich seltsame Probleme Nachteile: Viele Anfänger verstehen das Prinzip nicht. Wenn sich auf der Seite viele schwebende Layouts befinden, werden viele leere Divs hinzugefügt, was den Leuten Unbehagen bereitet Empfehlung: Nicht empfohlen, aber diese Methode wurde früher als Methode zum Löschen von Floats verwendet Bewertung: ★★★☆☆ 3. Übergeordnetes Div definiert die Höhe
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*Lösungscode*/height:200px;}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Rand oben:10px}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Das manuelle Definieren der Höhe des übergeordneten Divs löst das Problem, dass das übergeordnete Div die Höhe nicht automatisch ermitteln kann Vorteile: einfach, weniger Code, leicht zu beherrschen Nachteile: Nur für Layouts mit fixer Höhe geeignet. Sie müssen eine genaue Höhe angeben. Wenn die Höhe von der des übergeordneten Div abweicht, treten Probleme auf. Empfehlung: Nicht empfohlen, nur für Layouts mit fester Höhe empfohlen Bewertung: ★★☆☆☆ 4. Übergeordnetes Div definiert overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*Lösungscode*/width:98%;overflow:hidden}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Rand oben:10px;Breite:98%}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Sie müssen width oder zoom:1 definieren, die Höhe können Sie nicht definieren. Bei Verwendung von overflow:hidden prüft der Browser automatisch die Höhe des schwebenden Bereichs. Vorteile: einfach, weniger Code, gute Browserunterstützung Nachteile: Kann nicht mit Position verwendet werden, da die Größe, die den Grenzwert überschreitet, ausgeblendet wird. Empfehlung: Dies wird nur für diejenigen empfohlen, die die Position nicht verwendet haben oder über ein tiefes Verständnis von overflow:hidden verfügen. Bewertung: ★★★☆☆ 5. Übergeordnetes Div definiert overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*Lösungscode*/width:98%;overflow:auto}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Rand oben:10px;Breite:98%}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Sie müssen width oder zoom:1 definieren, die Höhe können Sie nicht definieren. Bei Verwendung von overflow:auto prüft der Browser automatisch die Höhe des schwebenden Bereichs. Vorteile: einfach, weniger Code, gute Browserunterstützung Nachteil: Wenn die interne Breite und Höhe das übergeordnete Div überschreitet, wird eine Bildlaufleiste angezeigt. Empfehlung: Nicht empfohlen. Verwenden Sie diese Methode nur, wenn Bildlaufleisten angezeigt werden müssen oder wenn Sie sicherstellen möchten, dass Ihr Code keine Bildlaufleisten anzeigt. Bewertung: ★★☆☆☆ 6. Das übergeordnete Div schwebt ebenfalls zusammen
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*Lösungscode*/width:98%;margin-bottom:10px;float:left}
.div2{Hintergrund:#800080;Rand:1px durchgehend rot;Höhe:100px;Breite:98%;/*Lösungscode*/Clear:both}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
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. Bewertung: ★☆☆☆☆ 7. Übergeordnetes Div definiert Anzeige:Tabelle
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*Lösungscode*/width:98%;display:table;margin-bottom:10px;}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Breite:98%;}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Div-Attribute in eine Tabelle umwandeln Vorteile: Keine Vorteile Nachteile: Es werden neue, unbekannte Probleme auftreten Empfehlung: Nicht empfohlen, nur zum Verständnis Bewertung: ★☆☆☆☆ 8. Fügen Sie am Ende das br-Tag clear:both hinzu
<style type="text/css">
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rot;Rand unten:10px;Zoom:1}
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px}
.left{float:left;Breite:20%;Höhe:200px;Hintergrund:#DDD}
.rechts{float:rechts;Breite:30%;Höhe:80px;Hintergrund:#DDD}
.clearfloat{clear:both}
</Stil>
<div Klasse="div1">
<div class="left">Links</div>
<div class="right">Rechts</div>
<br Klasse="clearfloat" />
</div>
<div Klasse="div2">
div2
</div>
Prinzip: Das übergeordnete Div definiert zoom:1, um das IE-Floating-Problem zu lösen, und fügt am Ende ein br-Tag clear:both hinzu. Empfehlung: Nicht empfohlen, nur zum Verständnis Bewertung: ★☆☆☆☆ Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Implementierung der MySQL-Datentypkonvertierung
>>: W3C Tutorial (9): W3C XPath Aktivitäten
Artikel empfehlen
Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen
Optimieren von Abfragen Verwenden der Explain-Anw...
Beispiel für die Implementierung eines globalen Wasserzeichens in Vue
Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...
Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?
Programmierer müssen sich viel mit MySQL befassen...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 unter Windows
Dieser Artikel zeichnet das Installations-Grafik-...
Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden
Wie lässt sich bei einem unbekannten Server oder ...
Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder
Problem 1: Baidu Map verwendet gekachelte Bilder ...
Zusammenfassung verschiedener MySQL-Installationsmethoden und Konfigurationsprobleme
1. Installation des MySQL RPM-Pakets # Laden Sie ...
So konfigurieren Sie die MySQL Master-Slave-Replikation unter Windows
Die MySQL Master-Slave-Replikation ermöglicht die...
Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL
Ein Kollege hat mir einmal gesagt, ich solle eine...
Installations-Tutorial für virtuelle VMware-Maschinen unter Ubuntu 18.04
Installationsschritte 1. Erstellen Sie eine virtu...
Tutorial zur Verwendung von Hyperlink-Tags in XHTML
Hyperlink, auch „Link“ genannt. Man kann sagen, d...
Schritte zur Linux-Bridge-Methode zum Überbrücken zweier virtueller VirtualBox-Netzwerke
Dieser Artikel entstand aus meinen Beschwerden üb...
Methode zum Vergleichen der Größe von Varchar-Typnummern in einer MySQL-Datenbank
Erstellen einer Testtabelle -- ------------------...
Lösung für den Fehler 1045, wenn Navicat eine Verbindung zu MySQL herstellt
Beim Herstellen einer Verbindung mit der lokalen ...
MySQL wählt die richtige Speicher-Engine
Wenn es um Datenbanken geht, ist eine der am häuf...