Die Rolle von „clear:both“ in CSS verstehen

Wenn eine Webseite Elemente enthält, die nach links oder rechts schweben, ist dies möglich Dadurch werden sie von nachfolgenden Elementen umströmt. Um dies zu verhindern, stellt CSS die Eigenschaft „clear“ bereit, die auf eine bestimmte Seite (links, rechts) oder auf „both“ gesetzt werden kann.

Was ist der Nutzen von „clear:both“ ?

"clear:both" weist das Element an, unter alle vorhergehenden Elemente zu fallen, die nach links und rechts verschoben wurden. Dies ermöglicht es, in einer neuen Zeile zu beginnen und alle Ränder oder Abstände zu entfernen, die andernfalls um die schwebenden Elemente gewickelt wären.

Wie funktioniert „clear:both“?

In einem normalen Dokumentenfluss werden Elemente vertikal gestapelt und der Inhalt fließt um sie herum. Wenn ein Element jedoch schwebend ist, verschiebt es sich entweder nach links oder rechts, sodass andere Inhalte darunter fließen können. „clear:both“ weist das aktuelle Element an, unterhalb aller zuvor schwebenden Elemente auf beiden Seiten zu beginnen.

Beispielverwendung

Betrachten Sie den folgenden HTML-Code:

In diesem Beispiel wird das „Left Float“-Div nach links verschoben, was den Text „This is a Paragraph“ verursacht um es herumzuwickeln. Das Div „Beide löschen“ wird dann verwendet, um sowohl die linke als auch die rechte Seite zu löschen, sodass der Text „Dies ist ein neuer Absatz“ in einer neuen Zeile darunter angezeigt werden kann.
Schlussfolgerung 
Durch die Einstellung „clear:both“ für ein Element können Sie sicherstellen, dass es in einer neuen Zeile unter allen zuvor schwebenden Elementen beginnt, wodurch ein konsistentes und kontrolliertes Layout gewährleistet wird.