CarstenP: Firefox hebt ein float zu viel auf

Beitrag lesen

Hallo Ingo,

Gemäß CSS 2.1 ist das vollkommen richtig (siehe Link unten).

"The 'clear' property does not consider floats inside the element itself or [...]." (aus: http://www.w3.org/TR/CSS21/visuren.html#flow-control)

Ich verstehe das aber so, daß dies lediglich die Eigenschaft clear für das Element betrifft

Ja, das war auch schon mit CSS 2 so, aber den entscheidenden Satz hast Du in dem Zitat weggelassen... ;-)

Also nochmal: folgendes ist für das vorliegende Problem relevant:

"The 'clear' property does not consider floats [...] in other block formatting contexts."

Was ist ein "Block formatting context"? Der ursprüngliche "Block formatting context" ist der Viewport. Aber ein absolut positioniertes Element, ein gefloatetes Element oder ein Element mit zum Beispiel overflow:auto (und ein paar andere) spannen einen neuen "Block formatting context" auf. Oder wie ich es gerne nenne: sie bilden ihren eigenen "Mikrokosmos". Alle clears innerhalb dieses Mikrokosmos beziehen sich nur noch auf floats innerhalb dieses Mikrokosmos. Alle floats außerhalb dieses Mikrokosmos -- oder in den Worten der Spezifikation: "in other block formatting contexts" -- bleiben von diesen clears unberührt.

Wenn dies anders wäre, welchen relevanten Unterschied würdest Du dann auf meiner Seite im zweiten (Box ohne float) und dritten (Box mit float) Beispiel sehen? Oder anders gesagt: wo steht denn, daß sich clear in gefloateten Elementen anders auswirken soll als in nicht gefloateten?

s. o.

Allgemein noch zu Deinen Beispielen:

IE und float ist ja sowieso eine Geschichte für sich, deswegen werden Beispiel 1 und 3 richtig angezeigt, Beispiel 2 falsch (width für ein floatendes Element sorgt für viele IE-Float-Bugs).

Mozilla hat irgendwo zwischen 1.7.3 und 1.7.5 auf die CSS-2.1-konforme Darstellung umgeschaltet. Deswegen wird Beispiel 1 in Firefox 1.0 (--> mindestens Mozilla 1.7.5) und älteren Mozillas bzw. Netscape 7 unterschiedlich angezeigt (Firefox und neuere Mozillas richtig, ältere Mozillas/Netscape 7 falsch).

Beispiel 3 wird entgegen Deinem Satz "Im folgenden Beispiel hält sich kein mir bekannter Browser an die korrekte Definition" in allen von mir getesteten Browsern CSS-2.1-konform angezeigt.

Viele Grüße
Carsten