Heim > Artikel > Web-Frontend > Verwendung von Float in CSS
Das
float-Attribut verschiebt Elemente auf der Seite und zeigt sie nebeneinander mit benachbarten Elementen an, ohne das reguläre flüssige Layout zu beeinträchtigen. Die Float-Werte sind: left (left float), right (right float), none (clear float). Schwebende Elemente wirken sich auf den Inhaltsüberlauf, den Abstand und die Höhe des übergeordneten Containers aus. Zu den Methoden zum Löschen von Floats gehören: Löschen von Attributen, Floating-Elementen und Overflow: Hidden.
Verwendung von Float in CSS
Float-Definition
Die Float-Eigenschaft in CSS positioniert ein Element außerhalb seines Inhaltsfelds, sodass es auf der Seite schwebt. Schwebende Elemente haben keinen Einfluss auf das reguläre flüssige Layout anderer Elemente, sondern erscheinen Seite an Seite mit ihren angrenzenden Elementen.
float-Werte Das
float-Attribut kann die folgenden Werte annehmen:
Verwendung
Um ein Element zu schweben, fügen Sie das Float-Attribut zu seinem Stil hinzu:
<code class="css">element { float: left; }</code>
Auswirkungen
Ein schwebendes Element wirkt sich auf seine benachbarten Elemente aus:
Floats löschen
Um Floats zu löschen, können Sie eine der folgenden Methoden verwenden:
Beispiel
Der folgende Code erstellt einen Container mit zwei schwebenden Elementen:
<code class="html"><div class="container"> <div class="element1">元素 1</div> <div class="element2">元素 2</div> </div></code>
<code class="css">.container { display: flex; } .element1 { float: left; background: red; width: 100px; } .element2 { float: right; background: blue; width: 100px; }</code>
Ausgabe:
<code>元素 1 | 元素 2</code>
Das obige ist der detaillierte Inhalt vonVerwendung von Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!