Welche Methoden der Verhinderung des Flusses (clearing) kennen Sie und wo werden sie angewendet?

• clear: both;: Die gebräuchlichste und zuverlässigste Methode. Wird auf ein Element angewendet, das unter allen vorherigen floatenden Elementen positioniert werden soll. Dies kann ein separates leeres Element oder eines der Layout-Elemente sein.
• Hinzufügen eines leeren Elements mit clear: both;: Wird manchmal verwendet, um das Fließen garantiert zu löschen, insbesondere bei komplexen Layouts. Es ist ein leeres div oder ein anderes Blockelement.
• Pseudo-Element :after mit clear: both;: Modernere Methode. Wird auf den Container der floatenden Elemente angewendet. Erzeugt ein "virtuelles" Element nach dem letzten Inhalt des Containers, um das Fließen innerhalb zu löschen.

/* Beispiel für die Verwendung des Pseudo-Elements :after */
.container::after {
  content: ""; /* Obligatorische Eigenschaft für Pseudo-Elemente */
  display: table; /* Wird häufig für bessere Kompatibilität verwendet */
  clear: both;
}

• overflow: hidden; oder overflow: auto;: Wird auf den Container der floatenden Elemente angewendet. Erzeugt einen neuen Block-Formatting-Kontext, der das Fließen innerhalb bereinigt. Dies kann jedoch Inhalte abschneiden oder Scrollleisten erzeugen, wenn der Inhalt die Grenzen des Containers überschreitet.
• Block-Formatting-Kontext (BFC): Alle oben genannten Methoden, außer dem expliziten leeren Element, erzeugen auf die eine oder andere Weise einen neuen BFC, was zum Löschen des Fließens führt. Eigenschaften, die BFC erzeugen:
  • float (nicht-null Wert)
  • overflow (Wert ungleich visible)
  • display: inline-block
  • position: absolute oder fixed
  • display: flow-root; (relativ neu, erzeugt explizit einen BFC)

Vergleichstabelle der Methoden:

Methode	Anwendung auf	Löschen des Flusses	Potenzielle Probleme
clear: both;	Element	Explizites Löschen	Zusätzliche Elemente
Leeres Element + clear	Leeres Element	Explizites Löschen	Zusätzliche Elemente
:after + clear	Container	Pseudo-Element	Schwerer für Anfänger verständlich
overflow: hidden/auto;	Container	Erzeugung von BFC	Abschneiden / Scrollbalken
BFC mit einer anderen Eigenschaft erstellen	Container	BFC-Erzeugung	Unabsichtlich, Nebenwirkungen
display: flow-root;	Container	Explizite BFC-Erzeugung	Eingeschränkte Unterstützung in alten Browsern

Anwendungsbereiche:

• Damit ein Element nach floatenden Elementen darunter angezeigt wird.
• Damit ein Container, der nur floatende Elemente enthält, nicht in der Höhe kollabiert.
• In komplexen Layouts, um den Dokumentenfluss um floatende Elemente zu steuern.