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

1.

2.

3.

4.

5.

6.

7a.

7b.

8a.

8b.

9a.

9b.

10a.

10b.

11a.

11b.

12a.

12b.

13.

14.

15.

16.

In all the above test cases there are boxes in a gray container, called b1, b2, b3 according to their source order. All the boxes (and the container) have hasLayout (MS.) Most of the boxes are floated as indicated in the box itself (the green and blue ones); some have clear set (the blue and red ones.) The combination float+clear triggers several anomalies in IE7-/Win. In short:

1. A float having the clear property (value both) only clears preceding floats of its same direction (left/right.) This fact is responsible for the wrong behaviour in the following cases:

   • 3: The right float b2 does not clear the preceding left float b1
   • 5: The left float b2 does not clear the preceding right float b1
   • 7a: The left float b2 does not clear the preceding right float b2
   • 8b: The right float b3 does not clear the preceding left float b1
   • 10b: The left float b2 does not clear the preceding right float b1
   • 11a: The right float b3 does not clear the preceding left float b2

   The clear property works correctly on not floated elements. The following cases correspond to the six wrong ones previously mentioned, but are correctly rendered since clear is applied to a not-floated element:

   • 4.
   • 6.
   • 9a.
   • 9b.
   • 12b.
   • 12a.

2. If the window is narrowed so that the gray wrappers are not wide enough to contain side by side a (green) float box and a (blue) float+clear one, then the following happens in the above mentioned cases of missing clear effect:

   • When a left float with clear: both misses to clear a preceding right float, then the left one overlaps the right one (cases 5, 7a, 10b)
   • When a right float with clear: both misses to clear a preceding left float, then the right one stays at the right side of the left one (cases 3, 8a, 11b) forcing the container to expand in IE6-.

   A further strange and wrong behaviour shows up in cases 8a and 11b: A right float with clear: both preceded by a left float doesn't go enough to the left. The right side of the preceding left float acts as a barrier, even if the left and right floats are vertically separated.

   Cases 13-16 show that any clear (left, right or both) on a float following an opposite side float not only misses to clear the first one when required, but also makes the second float unable to drop below the first one when lack of horizontal space required so.

Other problems in IE7-/Win caused by float and clear on the same element.

CSS tests home