2 div.negativemargintop { clear:both; margin-top:-
10px; font:
14px/
0 Ahem; color: green;}
3 #float { float:left; background-color: green; margin-top:
17px; font-size:
1.5em; }
4 #visible { height:
20px; width:
40px; float:left; background-color: blue; }
6 The green box should be below the blue box.
<br>
7 - .negativemargintop gets
30px clearance thanks to its negative margin-top of -
10px.
8 - .negativemargintop then collapses its margins to -
10px which pulls it up
10px to the bottom edge of the float.
9 - #float positions itself
17px below the top-border edge of .negativemargintop
10 https://bugs.webkit.org/show_bug.cgi?id=
14664<br>
11 <div id=
"visible"></div>
12 <div class=
"negativemargintop">
13 <div id=
"float">xx
</div>
