- In die Berechnung der Höhe eines Elements fließen Kindelemente mit gesetztem float nicht ein (CSS2, Abschnitt 10.6.3: "floating boxes and absolutely positioned boxes are ignored").
aber gern: http://www.w3.org/TR/CSS21/visudet.html#root-height: "[...] floats inside absolutely positioned descendants or other floats are not."
(Ist zwar ein ganz leicht anderer Kontext, stimmt aber zufällig als Ergänzung zu obigem Satz :-)
Nicht zufällig, es stimmt exakt. Abschnitt 10.6 wurde geändert, in meiner (alten) Version heißt es unter 10.6.3 "Block-level, non-replaced elements in normal flow, and floating, non-replaced elements", im neuen 10.6.3 hingegen "Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'" - das "floating" ist also rausgefallen. Stattdessen sind jetzt 10.6.6 und der von Dir zitierte 10.6.7 hinzugekommen, unter anderem speziell für float-Elemente.
Kurzum: Mein Zitat ist irrelevant.
Das richtige Verhalten ist nach 10.6.6 und 10.6.7 wie von Peetes Mozilla ausgeführt, d.h. der margin-Bereich des inneren, grünen <div>s erweitert die Höhe des äußeren, orangen <div>s, so dass sich ein oranger Rahmen rundum um das grüne <div> bildet.
Der IE und diesmal auch Opera machen es falsch.
- Ein float-Element, in dem weitere float-Elemente liegen. Finde ich rein dem Gefühl nach sehr gewagt.
Im Gegenteil, das macht absolut Sinn.
Habe ja nicht gesagt, dass es keinen Sinn macht. Ich finde es nur irgendwie gewagt :)
Gruß,
soenk.e