In the case above there are 4 boxes in a gray container, let's call them b1..b4 according to their appearance in the source code. All the boxes (and the container) have hasLayout (MS.)
In IE7-/Win the third box completely ignores the presence of the second one: it (b3) is positioned higher than b2 and overlaps it.
Mozilla, Safari, Opera 6 and 8+ display the example correctly. IE/Mac and Opera 7 position b3 higher than b2, which is not correct , but at least in these browsers b3 doesn't overlap b2.
If there is in-flow (not floated) content between b1 and b2, then the problem disappears. See the following test case, where an empty div has been added.
More about this problem and variants, always caused by float and clear on the same element in IE7-/Win.
 A float should not be higher than an earlier one, according to the specifications, but Opera 7 breaks this rule.
CSS tests home