Wie funktionieren schwebende Elemente (floats) in…

Float-Elemente in CSS werden aus dem normalen Dokumentenfluss herausgenommen und in die angegebene Richtung (links oder rechts) innerhalb ihres enthaltenen Blocks verschoben. Inline-Nachbarelemente und Inhalte beginnen, das float-Element von der gegenüberliegenden Seite zu umfließen.

Hauptmerkmale von float:

left: Das Element verschiebt sich nach links.
right: Das Element verschiebt sich nach rechts.
none: Das Element verbleibt im normalen Fluss (Standardwert).
inherit: Erbt den Wert vom Elternelement.

Sie wurden häufig verwendet, um mehrspaltige Layouts zu erstellen, bevor Flexbox und Grid aufkamen.

Verhaltensmerkmale:

Das float-Element wird blockartig, unabhängig vom ursprünglichen Anzeige-Typ.
Die Höhe des Elternelements berücksichtigt die Höhe des float-Elements nicht, was zu einem "Zusammenfallen" des Containers führen kann. Zur Lösung werden Clearing-Methoden verwendet.

Clearing-Methoden:

clear-Eigenschaft: Wird auf ein Element angewendet, um zu verhindern, dass es von float-Elementen umflossen wird. Werte: left, right, both, none, inherit.
```
/* Das Element wird von float-Elementen auf beiden Seiten nicht umflossen */
.clear-both {
  clear: both;
}
```
Clearfix-Technik: Hinzufügen eines Pseudo-Elements :after zum Elternelement mit clear: both und weiteren Stilen, um das Zusammenfallen zu verhindern.
```
/* klassischer Clearfix */
.clearfix::after {
  content: "";
  display: table; /* oder "block" */
  clear: both;
}
```

Trotz moderner Layout-Methoden ist float noch nützlich für kleine Elemente, z.B. um ein Bild im Text zu platzieren.

Wie funktionieren schwebende Elemente (floats) in CSS?