Unterschiedliche Interpretation von 'clear'Wer den Textfluß über float steuert, setzt oft zu leichtfertig clear ein, um den Textfluß für nachfolgende Elemente aufzuheben. Es gibt unterschiedliche Interpretationen der Eigenschaft clear, die in CSS 2.1 wie folgt neu definiert ist:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
...
Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.
Values have the following meanings when applied to non-floating block boxes:
...
The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any right-floating [and | or] left-floating boxes that resulted from elements earlier in the source document.
Quelle: http://www.w3.org/TR/2005/WD-CSS21-20050613/visuren.html#propdef-clear
Die häufig anzutreffende Auffassung, daß die Eigenschaft clear nur floatende Elemente innerhalb eines ggfls. umschließenden Blocklevel-Elementes berücksichtigt, geht hieraus nicht hervor. Vielmehr heißt es, daß die erzeugte Box unter alle (links und/oder rechts) floatenden Boxen von früher im Quelltext stehenden Elementen gesetzt wird - ausgenommen hiervon sind nach CSS 2.1 floats von Kindelementen sowie innerhalb neu eingerichteter Box-Kontexte (was auch einer Problemlösung dienen kann).
Auch die Browser haben hier unterschiedliche Auffassungen zur Umsetzung, wie dieses erste Beispiel zeigt:
Firefox 1.0, Internet Explorer 6, Opera 7.5 sowie Konqueror und Safari halten hier den Abstand zum roten div ein; Mozilla 1.7 und Netscape 7 dagegen nicht, sondern interpretieren clear offensichtlich eher im Sinne von vielen Webdesignern als gemäß der Definition des W3C.
Gibt man dem blauen div eine Weite - was ja in keinem Zusammenhang mit einem folgenden clear stehen dürfte - dann halten nur noch Firefox 1.0, Opera 7.5 und Safari den Abstand ein, wie dieses zweite Beispiel zeigt:
Unterschiedlich wird clear auch bei nicht verschachtelten floatenden Boxen interpretiert, wie dieses dritte Beispiel zeigt:
#eins {float:left;}
#zwei {float:left;}
#drei {float:left; clear:left;}
#vier {float:left;}
Der Internet Explorer und Opera 7.5 interpretieren das blaue - lediglich später im Quelltext notierte - vierte div offenbar als Kindelement des dritten divs und wenden dessen Eigenschaft clear daher nicht darauf an. Opera 8 orientiert sich allerdings nicht mehr an der fehlerhaften Darstellung des IE, sondern am Standard des W3C.
Die Spezifikation geht leider oft an den Bedürfnissen der Webdesigner vorbei, so daß wie im ersten Beispiel ein clearendes Element nach einem floatenden Bild auch unter eine floatende Navigation gesetzt wird. Mögliche Lösungsansätze sind:
clear verzichten zu können.Ein neuer Box-Kontext ("block formatting context") wird nach CSS 2.1 durch "Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible'" erzeugt. Leider kann nur die erste Eigenschaft browserübergreifend ausgenutzt werden.
Im folgenden Beispiel wird das blaue div selbst gefloated und somit ein neuer Box-Kontext geschaffen, so daß sich die Eigenschaft clear des Kindelements nicht mehr auf die nun außerhalb dieses Box-Kontext stehende rote Box auswirkt:
Der Verzicht auf eine Breitenangabe der floatenden blauen Box ist nach CSS 2.1 zwar zulässig, bewirkt jedoch, daß sie je nach Inhalt nicht mehr den gesamten zur Verfügung stehenden Platz einnimmt.
Den neuen Box-Kontext über eine Änderung der overflow-Eigenschaft zu erschaffen vermeidet diesen Effekt zwar, hat jedoch den Nachteil, daß in zu kleinen Fenstern Scrollbalken generiert werden - und es funktioniert leider auch nur im Firefox und anderen Gecko-basierten Browsern zufriedenstellend: