1. float
2. clear + float, blah blah blah blah blah blah
3. float
4. clear

IE7-/Win: problem with float + clear on the same element

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 [1], 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.

1. float
2. clear + float, blah blah blah blah blah blah
3. float
4. clear

More about this problem and variants, always caused by float and clear on the same element in IE7-/Win.


[1] A float should not be higher than an earlier one, according to the specifications, but Opera 7 breaks this rule.

CSS tests home