Die Rolle von „clear: Both“ im CSS-Styling verstehen

Bei der Arbeit mit Webdesign ist es wichtig, das Konzept des Floatings zu verstehen Elemente und wie man ihre Position kontrolliert. Das Stilattribut „clear: Both“ erweist sich in diesem Zusammenhang als wertvolles Werkzeug.

Erläuterung von „clear: Both“

Die Eigenschaft „clear: Both“ ermöglicht ein Element, das Platz unter allen davor stehenden Float-Elementen einnimmt. Es zwingt das Element dazu, in einer neuen Zeile zu beginnen, um sicherzustellen, dass es die schwebenden Elemente nicht überlappt oder mit ihnen kollidiert aus dem normalen Fluss des Dokuments heraus, so dass andere Elemente es umschließen können. Durch die Anwendung von „clear: Both“ weisen Sie das aktuelle Element an, das Vorhandensein aller vorangehenden Floats zu ignorieren und sich so zu verhalten, als ob sie nicht vorhanden wären. Dieses Verhalten wird im folgenden Codebeispiel demonstriert:

Sie können außerdem angeben, in welche Richtung das Element verlaufen soll Zum Löschen verwenden Sie „clear: left“ oder „clear: right“. Mit diesen Optionen können Sie Floats löschen, die als links oder rechts festgelegt wurden.
Wenn Sie beispielsweise ein Layout mit zwei Seitenleisten und einem Hauptinhaltsbereich in der Mitte haben, können Sie „Löschen: beide“ verwenden. auf dem Hauptinhalts-Div, um sicherzustellen, dass es den Platz unter beiden Seitenleisten einnimmt, unabhängig von ihrer Float-Richtung.