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
Ubuntu16.04 erstellt eine php5.6-Webserverumgebung
Ubuntu 16.04 installiert standardmäßig die PHP7.0...
Linux weist eine Sicherheitslücke bei der Rechteausweitung bei Sudo auf, jeder Benutzer kann auch Root-Befehle ausführen
Als eines der am häufigsten verwendeten und wicht...
MySQL verwendet UNIQUE, um das Einfügen nicht doppelter Daten zu implementieren
SQL UNIQUE-Einschränkung Die UNIQUE-Einschränkung...
Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge
Im Allgemeinen : [1 wichtige Flagge] > [4 beson...
Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING
Unter Zellenabstand versteht man den Abstand zwis...
TypeScript-Lernhinweise: Typeingrenzung
Inhaltsverzeichnis Vorwort Typinferenz Einengung ...
MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows
MySQL bietet zwei verschiedene Versionen für unte...
Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue
Dieser Artikel stellt hauptsächlich ein Beispiel ...
Detaillierte Erläuterung der Idee des MySQL-Triggers zur Echtzeiterkennung einer Anweisung zum Sichern und Löschen
Problembeschreibung: Der Benutzer hat die Anforde...
So installieren Sie Redis im Docker, legen das Kennwort fest und stellen eine Verbindung her
Redis ist ein verteilter Cache-Dienst. Caching is...
Mysql implementiert die regelmäßige Bereinigung alter Daten in einer Tabelle und die Beibehaltung mehrerer Datenstücke (empfohlen)
Um folgende Ziele zu erreichen: Die MySQL-Datenba...
Docker-Lösung zum Anmelden ohne Root-Rechte
Wenn Sie den Docker-Befehl zum ersten Mal verwend...
Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)
Kompatibel mit neuen CSS3-Eigenschaften In CSS3 k...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 unter macOS
In diesem Artikel finden Sie das Installations- u...
Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann
Der Test wird in der Node.JS-Umgebung bestanden. ...