Was sind schwebende Elemente (floats) in CSS?

CSS-Fließkommazahlen sind eine Positionierungs-Eigenschaft, die ein Element an eine Seite seines Containers verschiebt (left oder right), sodass Text und Inline-Elemente es umfließen können. Das Element wird aus dem normalen Dokumentenfluss entfernt, bleibt aber Teil des Layouts. Ursprünglich wurden sie verwendet, um Mehrspaltendesigns zu erstellen und Bilder mit Text zu umfließen, heute werden sie hauptsächlich zur Lösung spezifischer Aufgaben eingesetzt, da flexiblere und vorhersehbarere Methoden wie Flexbox und Grid verfügbar sind.

Hauptwerte der float-Eigenschaft:

• none: Das Element wird im normalen Fluss angezeigt (Standardwert).
• left: Das Element wird an den linken Rand des Containers verschoben.
• right: Das Element wird an den rechten Rand des Containers verschoben.
• inherit: Erbt den Wert vom Elternelement.

Beispiel:

.image {
  float: left;
  margin-right: 15px; /* Abstand rechts vom umfließenden Text */
}

.text {
  /* Der Text wird das Element mit der Klasse .image umfließen */
}

Probleme mit Fließkommazahlen:

• Fließen aus dem Fluss (zusammenfallendes umgebendes Element): Ein Elternelement, das nur floatende Elemente enthält, kann in der Höhe zusammenfallen, da diese Elemente in seinen normalen Abmessungen nicht berücksichtigt werden.
• Überlappung von Elementen: Nachbar-Elemente können das floatende Element überlappen, wenn ihre Größen nicht berücksichtigt werden.

Lösungen:

• clear-Eigenschaft: Wird auf ein Element gesetzt, das das floatende Element nicht umfließen soll. Werte: left, right, both, none.
• Clearfix-Technik: Hinzufügen einer speziellen Klasse zum Elternelement oder Verwendung des Pseudo-Elements :after, um das Zusammenfallen des Elternelements zu erzwingen.

.container::after {
  content: "";
  display: table; /* Oder block */
  clear: both;
}

• Moderne Methoden: Verwendung von Flexbox oder CSS Grid für komplexe Layouts.

Obwohl Fließkommazahlen kein Hauptwerkzeug für das Layout im modernen Web sind, ist das Verständnis ihrer Funktionsweise wichtig, um alten Code zu pflegen und spezifische Aufgaben zu lösen, z.B. das Umfließen von Text um Bilder.