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:

• left: Floaten Sie das Element auf der linken Seite des Containers.
• rechts: Schweben Sie das Element auf die rechte Seite des Behälters.
• none: Löschen Sie den Float und bringen Sie das Element in seine normale flüssige Anordnung zurück.

Verwendung

Um ein Element zu schweben, fügen Sie das Float-Attribut zu seinem Stil hinzu:

element {
  float: left;
}

Auswirkungen

Ein schwebendes Element wirkt sich auf seine benachbarten Elemente aus:

• Inhaltsüberlauf: von Elementinhalt kann benachbarte Elemente überlaufen.
• Abstand: Zwischen schwebenden Elementen und angrenzenden Elementen kann ein Abstand bestehen.
• Höhe des übergeordneten Containers: Wenn die Höhe des schwebenden Elements höher als die des übergeordneten Containers ist, wird die Höhe des übergeordneten Containers automatisch angepasst, um das schwebende Element aufzunehmen.

Floats löschen

Um Floats zu löschen, können Sie eine der folgenden Methoden verwenden:

• Clear-Attribut: Wenden Sie das Clear-Attribut auf ein Element an und löschen Sie alle seine Float-Elemente.
• Floatierte Elemente: Fügen Sie ein schwebendes Element nach dem schwebenden Element hinzu und löschen Sie das schwebende Element in einer neuen Zeile.
• overflow: versteckt: Wenden Sie die Überlaufeigenschaft auf den übergeordneten Container an, um schwebende Elemente im Container auszublenden.

Beispiel

Der folgende Code erstellt einen Container mit zwei schwebenden Elementen:

<div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div>

.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}

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!