Detaillierte Erklärung der CSS-Float-Eigenschaft

1. Was ist Floating?

Floaten bedeutet, wie der Name schon sagt, schweben. Bezieht sich auf das Phänomen, dass ein Element vom Dokumentfluss getrennt wird und über dem übergeordneten Element schwebt.

2. Wie erzeugt man Floating?

Fügen Sie dem Element selbst das Float-Attribut hinzu

Gleitkommawert:

3.Was ist die Funktion des Schwebens?

Funktion: Im HTML-Dokumentenfluss wird es in Zeilenelemente, Blockelemente und Inline-Blockelemente unterteilt.

Zeilenelemente und Inline-Blockelemente werden horizontal angeordnet, während Blockelemente in einem Fluss von oben nach unten angeordnet werden. Wenn wir Blockelemente horizontal anordnen möchten, verwenden wir Float.

Wenn einem Element auf Blockebene ein Float hinzugefügt wird, werden die Elemente, die vertikal angeordnet werden sollten, horizontal angeordnet, wie in der folgenden Abbildung gezeigt:

.box {Rahmen: 1px durchgehend #666;Höhe: 700px;Breite: 700px;Farbe: #fff;}
.box1 {float: links; Breite: 100px; Höhe: 100px; Hintergrund: #000;}
.box2 {float: links; Breite: 100px; Höhe: 100px; Hintergrund: rot; }
.box3 {Breite: 200px; Float: links; Höhe: 200px; Hintergrund: gelb; }
.box4 {Breite: 300px; Float: links; Höhe: 300px; Hintergrund: blau; }
.box5 {float: links; Breite: 300px; Höhe: 400px; Hintergrund: grün;}
<div class="box"> <div class="box1"> Kasten1 </div> <div class="box2"> Kasten2 </div> <div class="box3"> Kasten3 </div> <div class="box4"> Kasten4 </div> <div class="box5"> Kasten5 </div> </div> 

4. Probleme durch Floating

Wenn ein Element schwebt, befindet es sich außerhalb des Dokumentflusses, was zu einem schwerwiegenden Problem führt: Die Höhe des übergeordneten Elements bricht zusammen (am Beispiel des obigen Beispiels):

.box {border: 1px solid #666; width: 800px;color: #fff;}
.box1 {float: links; Breite: 100px; Höhe: 100px; Hintergrund: #000;}
.box2 {float: links; Breite: 100px; Höhe: 100px; Hintergrund: rot; }
.box3 {Breite: 200px; Float: links; Höhe: 200px; Hintergrund: gelb; }
.box4 {Breite: 300px; Float: links; Höhe: 300px; Hintergrund: blau; }
.box5 {float: links; Breite: 300px; Höhe: 400px; Hintergrund: grün;}
.auf { Breite: 50px; Höhe: 300px; Hintergrund: pink; }
<div Klasse="Box">
        <div Klasse="box1"> Box1 </div>
        <div Klasse="box2"> Box2 </div>
        <div Klasse="box3"> Box3 </div>
        <div class="box4"> Box4 </div>
        <div class="box5"> Box5 </div>
</div>
<div Klasse="ein"> </div>

Wenn ich der Box des übergeordneten Elements keine Höhe hinzufüge, beträgt die Boxhöhe 0 und die Geschwisterelemente der Box werden nach oben gedrückt. Das schwebende Element überdeckt dabei das übergeordnete Geschwisterelement:

5. Wie kann das Problem gelöst werden (Vorteile und Nachteile)?

(1) Übergeordnetes Div definiert die Höhe

<style type="text/css">
/*Lösungscode*/
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rot; Höhe: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 Div löst das Problem, dass das übergeordnete Div die Höhe nicht automatisch erhalten 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

(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;height:0;overflow:hidden;}
</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 ein schlechtes Gefühl gibt

Empfehlung: Nicht empfohlen, aber diese Methode wurde früher als Methode zum Löschen von Floats verwendet

(3) Das übergeordnete Div definiert Pseudoobjekte: 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;Überlauf:Versteckt;}
.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: IE8 und höher sowie Nicht-IE-Browser unterstützen :after. Das Prinzip ist ähnlich wie bei Methode 2. Zoom (exklusive IE-Eigenschaft) kann das Floating-Problem von IE6 und IE7 lösen.

Vorteile: gute Browserunterstützung, nicht anfällig für seltsame Probleme (derzeit: wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet)

Nachteile: Es gibt zu viele Codes und viele Anfänger verstehen die Prinzipien nicht. Zwei Codes müssen kombiniert werden, damit Mainstream-Browser dies unterstützen.

Empfehlung: Um den CSS-Code zu reduzieren, wird empfohlen, gemeinsame Klassen zu definieren.

(4) Das übergeordnete Div definiert overflow:hidden

<style type="text/css">
/*Lösungscode*/
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rot; Breite:98%;Überlauf:versteckt}
.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.

(5) Das übergeordnete Div definiert overflow:auto

<style type="text/css">
/*Lösungscode*/
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rot; Breite:98%;Überlauf: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.

(6) Das übergeordnete Div schwebt ebenfalls zusammen

<style type="text/css">
/*Lösungscode*/
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rot; Breite:98%;Rand unten:10px;Float:links}
/*Lösungscode*/
.div2{Hintergrund:#800080;Rahmen:1px durchgehend rot;Höhe:100px;Breite:98%;Löschen:beide}
.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.

(7) Das übergeordnete Div definiert display:table

<style type="text/css">
;/*Lösungscode*/
.div1{Hintergrund:#000080;Rahmen:1px durchgehend rotBreite:98%;Anzeige:Tabelle;Rand unten: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

Nachteil: Es werden neue, unbekannte Probleme auftreten.

Empfehlung: Nicht empfohlen, nur zum Verständnis.

(8) Füge am Ende den br-Tag clear:both hinzu

Stiltyp = "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.

Zusammenfassen

Dies ist das Ende dieses Artikels mit der ausführlichen Erklärung der CSS-Float-Eigenschaft. Weitere relevante CSS-Float-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!