clear

Die Eigenschaft clear steht in direktem Zusammenhang mit floats. Wenn ein Element horizontal in den Platz neben einem anderen gefloateten Element passt, wird es dort platziert. Es sei denn, Sie wenden clear auf dieses Element in der gleichen Richtung wie den Float an. Dann wird das Element unterhalb des gefloateten Elements platziert.

Hier ist ein einfaches Beispiel für ein Layout, das mit Floats erstellt wurde und für den Footer problematisch sein könnte

Aber durch das Clearing des Footer-Elements schnappt das Layout an seinen Platz

#footer {
   clear: both;
}

In diesem Fall wurde clear: both; verwendet, um sicherzustellen, dass der Footer Elemente in beiden Richtungen überragt, die gefloatet sind. Sie können aber auch nur left oder right clearen, in welchem Fall das Element unterhalb von Elementen platziert wird, die in dieser Richtung gefloatet sind, aber nicht in der anderen.

Eine gängige Methode, Floats zu clearen, ist die Anwendung eines Pseudo-Elements auf ein Container-Element, das den Float cleart. Erfahren Sie hier mehr darüber.

Weitere Ressourcen

• Alles über Floats
• MDN
• Spezifikation im Visual Formatting Model (CSS2)
• W3C Wiki zu „Floats und Clearing“ und ein Eigenschaftsreferenz.
• Noah Stokes: CSS Floats 101

Browser-Unterstützung

Die Eigenschaft clear funktioniert in allen Browsern.