Welche Methoden der Flussblockierung (Clearing)…

overflow: hidden; oder overflow: auto;: Wird auf das Elternelement eines Elements mit float angewendet. Erzeugt einen neuen Blockformatierungskontext (BFC), wodurch das Elternelement die umgebenden Elemente in seiner Höhe einschließt.

Situation: Die einfachste Methode, um Inhalte zu verbergen, die über die Grenzen des Elements hinausragen, oder um Scrollen anzuwenden. Funktioniert auch als Reinigungsmethode.

clear: both;: Wird auf ein Element angewendet, das keine umfließenden vorherigen Elemente mit float haben soll. Dieses Element wird unter allen umfließenden Elementen positioniert.

Situation: Wenn eine neue Zeile oder Sektion nach Elementen erstellt werden soll, die sich gegenseitig umfließen.

Methode clearfix (Pseudo-Elemente ::after): Fügt dem Elternelement ein Pseudo-Element mit bestimmten Eigenschaften hinzu, das das Verhalten von clear: both; imitiert, aber ohne zusätzliche HTML-Elemente.

.clearfix::after {
    content: ""; /* Obligatorischer Inhalt, um das Pseudo-Element anzuzeigen */
    display: table; /* Erzeugt einen neuen Blockformatierungskontext, wie overflow: hidden; */
    clear: both; /* Wendet die Reinigung an */
}

Situation: Die am häufigsten verwendete und empfohlene Methode zum Reinigungsprozess, die sauber ist und die Markup-Struktur nicht stört. Wird auf das Elternelement angewendet, das umfließende Elemente enthält.

Verwendung von display: flex oder display: grid: Moderne Layout-Methoden, die kein Umfließen erfordern, um Elemente anzuordnen, wodurch die Notwendigkeit der Reinigung entfällt. Situation: Beim Erstellen komplexer Layouts oder wenn eine flexiblere Steuerung der Anordnung der Elemente erforderlich ist.
Hinzufügen eines zusätzlichen Elements mit clear: both; (alte Methode): Fügt nach den umfließenden Elementen ein leeres HTML-Element ein und wendet clear: both; an. Situation: Wird als veralteter und unerwünschter Ansatz angesehen, da es redundantes HTML hinzufügt.

Welche Methoden der Flussblockierung (Clearing) kennen Sie und in welchen Situationen werden sie angewendet?