Ausführliche Erklärung von CSS mit dem Float-Attribut zur Steuerung des Div-Floats nach links und rechts

Dieser Artikel vermittelt Ihnen relevantes Wissen über css, in dem hauptsächlich die Probleme im Zusammenhang mit dem Float-Attribut vorgestellt werden, das das linke und rechte Floating von Divs steuert. Floating bedeutet, wie der Name schon sagt, Floating. Es bezieht sich auf das Phänomen, dass ein Element vom Dokumentenfluss getrennt und über dem übergeordneten Element aufgehängt wird. Ich hoffe, es wird für alle hilfreich sein.

(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

1. Was ist Float?

Floating bedeutet, wie der Name schon sagt, Schweben. Bezieht sich auf das Phänomen, dass ein Element aus dem Dokumentenfluss ausbricht und über dem übergeordneten Element schwebt.

Float-Attribut im CSS-Stil, das zum Festlegen des schwebenden Layouts von Beschriftungsobjekten verwendet wird (z. B.

Beschriftungsfeld, Beschriftung, Beschriftung, Beschriftung und andere HTML-Beschriftungen), float Das heißt, wir sagen, dass das Beschriftungsobjekt nach links (float:left) und nach rechts (float:right) schwebt.

Die horizontale Richtung des Elements schwebt, was bedeutet, dass sich das Element nur nach links und rechts, aber nicht nach oben und unten bewegen kann.

Ein schwebendes Element versucht, sich nach links oder rechts zu bewegen, bis seine Außenkante den Rand der enthaltenden Box oder einer anderen schwebenden Box berührt.

Elemente nach dem schwebenden Element umgeben es.

Elemente vor dem schwebenden Element sind nicht betroffen.

Wenn das Bild nach rechts verschoben wird, wird der Textfluss unten links davon umbrochen.

2. Wie erzeuge ich Float?

Float-Attribut zum Element selbst hinzufügen

Float-Wert:

links	Das Element schwebt nach links.
right	Das Element schwebt nach rechts.
keine	Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.
inherit	gibt an, dass der Wert des Float-Attributs vom übergeordneten Element geerbt werden soll.

3. Welche Funktion hat das Schweben?

Funktion: Im HTML-Dokumentfluss ist er in Linienelemente, Blockelemente und Inline-Blockelemente unterteilt.

Linienelemente und Inline-Blockelemente sind horizontal angeordnet, während Blockelemente in einer Flussform von oben nach unten angeordnet sind Wenn wir Blockelemente horizontal anordnen möchten, verwenden wir unseren Float.

Wenn Sie Float zu einem Element auf Blockebene hinzufügen, beginnen die Elemente, die vertikal angeordnet werden sollten, horizontal angeordnet zu werden, wie in der folgenden Abbildung gezeigt:

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>

css+div float andere Anwendungsfälle

DIV CSS-Experiment eins

Css Für den Inhalt des Stilbeispiels legen wir den Text und die Bilder in einer Div-Ebene mit fester Breite ab, mit dem blauen Hintergrundtextinhalt auf der rechten Seite und den kleinen Bildern auf der linken Seite.

www.divcss5.com Das endgültige Rendering der CSS-Falldemonstration lautet wie folgt: 1. Zuerst legen wir ein äußerstes CSS mit einer Breite von 300 Pixel und einer Höhe von 200 Pixel fest wie folgt (Wissenspunkte: Was bedeutet px)

.box{width:300px; height:200px;}

2 Stellen Sie den CSS-Stil des Textinhalts im Feld auf Yangshi ein, stellen Sie den Hintergrund auf Blau, die Breite auf 120 Pixel und schweben Sie rechts ein

.yangshi{ width:120px; float:right; background:#0066FF;}

3 . Stellen Sie das Bild auf der linken Seite und den Float-Div+CSS-Stil ein Name ist demo.gif Der Textinhaltsbereich mit blauem Hintergrund auf der linken Seite (das vorherige Beispiel war auf der rechten Seite) (erweitertes CSS-Zentrum). Hier müssen wir nur Yangshis float:right; in float:left und den Bild-CSS-Stil img { float: left;} in img { float: right;} ändern.

CSS-Code ist wie folgt:

img { float: left;}

CSS-Code und Inhalt in html Unverändert

Der Screenshot des endgültigen Demonstrationsergebnisses lautet wie folgt:

Ich hoffe, dass die beiden oben genannten CSS-Beispiele Ihnen helfen, Float zu verstehen. Ich hoffe, Sie alle können es in der Praxis ausprobieren!

CSS-Floating-Zusammenfassung

Wir müssen den linken (text-align:left) und rechten (text-align:right) Textinhaltsstil unterscheiden. Floating legt nur den linken und rechten Floating-Stil für HTML-Tags fest. Der Float-Stil verfügt nicht über einen zentrierten (floating-centered) Stil. Wenn Sie das Etikettenobjekt zentrieren müssen, werden wir dies im Text zur CSS-Layout-Zentrierung ausführlich erläutern. Denken Sie hier daran, float:right zu verwenden, wenn Sie nach rechts schweben, und float:left, wenn Sie nach links schweben.

(Teilen von Lernvideos:

CSS-Video-Tutorial

,

HTML-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von CSS mit dem Float-Attribut zur Steuerung des Div-Floats nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!