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
Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau
„Wir schreiben unsere nächste Reihe mobiler Produ...
Node+Express zum Erzielen eines Paging-Effekts
In diesem Artikel wird der spezifische Code von n...
React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts
Inhaltsverzeichnis Vorwort 1. Anwendungsbeispiele...
MySQL-Rekursionsproblem
MySQL selbst unterstützt keine rekursive Syntax, ...
JS realisiert den Effekt der Baidu News-Navigationsleiste
In diesem Artikel wird der spezifische JS-Code zu...
So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden
So geben Sie das übergeordnete Verzeichnis an ../ ...
Was ist ein MySQL-Tablespace?
Das Thema, das ich heute mit Ihnen teilen möchte,...
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...
Zusammenfassung aller HTML-Interviewfragen
1. Die Rolle des Doctypes, der Unterschied zwisch...
Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation
Priorität Der Grund, warum das Platzieren derselb...
Detaillierte Erklärung zur Verwendung von MySQL mysqldump
1. Einführung in mysqldump mysqldump ist ein logi...
Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?
Einführung Als ich mehr über die Datenbanktheorie...
Die tdwidth-Einstellung der Tabelle in mehreren Divs ist gleich und kann nicht ausgerichtet werden
Kürzlich habe ich festgestellt, dass selbst wenn d...
Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code
Erstellen eines Ordners Verzeichnisstruktur: daba...
Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste
Vorwort: Während der Projektentwicklung stießen w...