Welche Methoden des Blockierens (Clearing) kennst du und in welchen Situationen werden sie angewendet?

Methoden zum Verhindern des Flusses:

• clear: left; — Verhindert das Fließen auf der linken Seite. Wird angewendet, wenn das Element nicht neben den links floatenden Elementen positioniert werden soll.
• clear: right; — Verhindert das Fließen auf der rechten Seite. Wird angewendet, wenn das Element nicht neben den rechts floatenden Elementen positioniert werden soll.
• clear: both; — Verhindert das Fließen auf beiden Seiten. Wird angewendet, wenn das Element nicht neben beliebigen floatenden Elementen positioniert werden soll. Dies ist die häufigste Variante.
• clear: none; (Standardwert) — Erlaubt das Fließen.

Anwendung:

• Zur Verhinderung des "Zusammenklappens" des Eltern-Containers: Wenn alle Kind-Elemente des Elternteils floaten (haben float), verliert der Eltern-Container seine Höhe und kollabiert. Das Hinzufügen eines Elements mit clear: both; nach den floatenden Elementen innerhalb des Elternteils oder die Verwendung des Pseudo-Elements ::after mit clear: both; löst dieses Problem.
• Für die korrekte Anordnung der Elemente nach den floatenden: Wenn normale (nicht floatende) Elemente unter den floatenden platziert werden sollen und nicht daneben.
• Zur Erstellung von "Reihen" oder "Zeilen" in float-basierten Layouts: Wenn floatende Elemente in mehreren Reihen angeordnet werden sollen, wird clear verwendet, um eine neue Reihe zu beginnen.

Beispiel für die Verwendung des Pseudo-Elements ::after zur Bereinigung:

.clearfix::after {
  content: ""; /* Wichtig für die Anzeige des Pseudo-Elements */
  display: table; /* Oder block */
  clear: both; /* Haupt-Eigenschaft für die Bereinigung */
}

Diese Klasse clearfix wird dann auf das Elternelement angewendet, das die floatenden Kind-Elemente enthält.