CSS 2.1: `clear`

Erläuterungen

(engl. clear = leeren, freimachen, freihalten)

Die Eigenschaft clear gibt an, auf welchen Seiten einer Elementbox keine vorhergehenden float-positionierten Elemente dargestellt werden dürfen. Anders ausgedrückt: Die mit clear bezeichnete Seite eines Elements wird von vorhergehenden Elementen freigehalten, deren float-Eigenschaft entweder right, left oder inherit ist.

Das bedeutet: das aktuelle Element wird so weit nach unten geschoben, bis es sich, bezogen auf die angegebene Seite, unterhalb aller vorhergehenden floatierten Elementen befindet.

Diese Eigenschaft ist nur auf Block- Level- Elemente anwendbar. Ist eine run-in-Box vorhanden, wird diese zunächst in das zugehörige Block- Level- Element integriert. Anschließend wird für dieses Element die Auswertung der Eigenschaft clear vorgenommen.

Hat das aktuelle Element float-Elemente als Abkömmlinge, wirkt clear sich auf diese Elemente nicht aus.
TOP

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'clear' none | left | right | both | inherit

left: Das Element wird soweit nach unten geschoben, bis seine Oberkante (d.h. die obere Außenkante des Rahmens) tiefer als die Unterkante aller vorher gehenden, links-floatierten Elemente liegt. Das geschieht durch eine entsprechende Vergrößerung des oberen Randabstands (margin).
right: Das Element wird soweit nach unten geschoben, bis seine Oberkante tiefer als die Unterkante aller vorher gehenden, rechts-floatierten Elemente liegt. Das geschieht durch eine entsprechende Vergrößerung des oberen Randabstands (margin).
both: Das Element wird so dargestellt, dass seine Oberkante in jedem Fall tiefer liegt als die Unterkante eines vorher gehenden floatierten Elements, sei dies nun links oder rechts positioniert. Auch hier wird dazu der Randabstand oben vergrößert.
none (Ausgangswert): float-Elemente können auf beiden Seiten des Elements erscheinen.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Beispiel für das Zusammenwirken von `float` und `clear`

Das Zusammenspiel zwischen float und clear ist nicht auf Anhieb verständlich, deshalb wollen wir jetzt ein kleines Beispiel im Bild betrachten.

Hier zunächst das Stylesheet:

div#eins { float:left; } div#zwei { float:right; clear:left; } div#drei { float:left; clear:left; } div#vier { float:right; clear:right; } div#fuenf { float:left; clear:right; } div#sechs { float:left; clear:left; }

Und dies ist das HTML:

Element 1:

Wegen float:left wird Element 1 als erstes Element ganz nach links geschoben.

Element 2:

Das zweite Element wird zuerst ganz nach rechts geschoben. Dann wirkt sich clear:left aus (es darf kein vorher gehendes float- Element weiter links liegen) und Element 2 wird nach unten geschoben, bis es tiefer als Element 1 liegt. Mit clear:right würde dieses Element oben rechts auf gleicher Höhe wie Element 1 stehen bleiben, denn es steht kein anderes relevantes Element auf der rechten Seite.

Beispiel für das Zusammenwirken von 'float' und 'clear'.

Element 3:

Es rutscht zur linken Seite und muss dort direkt unterhalb des Elements 1 liegen, weil seine Oberkante nicht höher als die Oberkante des vorher gehenden Element 2 liegen darf. Da die Oberkante des Elements 2 sich an der Unterkante des Elements 1 orientiert, kommt Element 3 direkt unter Element 1 zu liegen. Das clear:left spielt in diesem Fall keine Rolle mehr.

Element 4:

Element 4 wird zuerst neben Element 3 nach rechts gerückt, bis es links neben Element 2 steht. Bedingt durch clear:right rutscht es dann nach unten, bis es Element 2 nicht mehr neben sich stehen hat. Dann rutscht es ganz nach rechts. Eine Deklaration clear:left würde hier bedeuten, dass das Element weiter nach unten ritscht, bis es tiefer als Element 3 liegt (siehe blaue Strichlierung).

Element 5:

Dieses Element wird auf der Höhe des Elements 4 nach links bis geschoben, bis es direkt rechts neben Element 3 steht. Aufgrund der Deklaration clear:right muss es aber tiefer als das rechts- floatierte Element 4 liegen. Es rutscht also entsprechend weit nach unten und danach noch ganz nach links. Deshalb entsteht die Lücke unterhalb des Elementes 3.

Element 6:

Das sechste Element wird soweit wie möglich nach links geschoben, d.h. es kommt zunächst auf der rechten Seite von Element 5 zu liegen. Dann wirkt sich clear:left aus (es darf kein vorhergehendes float- Element weiter links liegen) und Element 6 wird nach unten geschoben, bis es nicht mehr neben Element 5 liegt. Da dann der Raum links von ihm frei ist, wird es weiter bis ganz nach links geschoben.

Code-Beispiel:

DIV.square { clear: left; }

Browserunterstützung

IE/Win 5.x, IE/Win 6, IE 7: Das Zusammenspiel zwischen den Eigenschaften float und clear kann bis zur Version 6 im Einzelfall zum Problem werden. Deshalb ist gründliches Testen sehr zu empfehlen. Von Version 7 an sind die meisten Probleme gelöst.
IE/Mac 5.x: Das Zusammenspiel zwischen den Eigenschaften float und clear kann im Einzelfall zum Problem werden. Deshalb ist gründliches Testen sehr zu empfehlen.

Die Eigenschaft clear wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

float

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Dennoch werden die Eigenschaften float und clear durch den Großteil aller Mobilgeräte-Browser ignoriert.