margin-top on elements with clear

Test cases with a float followed by a box with some margin-top and sometimes the clear property set.

The clear property is defined at CSS 2.1:9.5.2 Controlling flow next to floats. Other relevants parts of the spec: When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow (from float rule 4). And then the anonymous block parent has margins collapsing through it, so the position of its top border edge is the same as it would have been if the element had a non-zero bottom border (from margin collapsed through).

In the first series of tests there are separating paragraphs with gray background and NO bottom margin.

1.1 float A, height:30px
1.1 clear B with margin-top:50px

There should be 20px gap between A and B, OK in: Fx, Saf, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.
There is no space between A and B in: Op.

1.2 float A, height:30px
1.2 B with margin-top:50px

Like case 1.1, but without the clear property.

1.3 float A, height:60px
1.3 clear B with margin-top:50px

There should be no space between A and B, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

1.4 float A, height:30px
1.4 clear B with margin-top:50px

Like case 1.1, but with a (blue, border-less) wrapper: follies! See negative clearance, mozilla bug 376365.
There is no space between A and B and no space between A and the preceding paragraph in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

1.5 float A, height:30px
1.5 B with margin-top:50px

Like case 1.4, but without the clear property.

1.6 float A, height:30px, margin-bottom:5px
1.6 clear B with margin-top:50px

There should be 20px gap between A and B, OK in: Fx, Saf, IE8.
There are 55px gap between A and B, wrong, in: IE7-/Win.
There are 5px gap between A and B in: Op.


In the second series of tests the separating paragraphs with gray background have a 10px bottom margin.

2.1 float A, height:30px
2.1 clear B with margin-top:50px

There should be 10px gap between A and B, OK in: Fx, Saf, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.
There is no space between A and B in: Op.

2.2 float A, height:30px
2.2 B with margin-top:50px

Like case 2.1, but without the clear property.

2.3 float A, height:60px
2.3 clear B with margin-top:50px

There should be no space between B and A, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

2.4 float A, height:30px
2.4 clear B with margin-top:50px

Like case 2.1, but with a (blue, border-less) wrapper: follies! See negative clearance, mozilla bug 376365.
There is no space between A and B and 10px space between A and the preceding paragraph in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

2.5 float A, height:30px
2.5 B with margin-top:50px

Like case 2.4, but without the clear property.

2.6 float A, height:30px, margin-bottom:5px
2.6 clear B with margin-top:50px

There should be 10px gap between A and B, OK in: Fx, Saf, IE8.
There are 55px gap between A and B, wrong, in: IE7-/Win.
There are 5px gap between A and B in: Op.


In the third series of tests the separating paragraphs with gray background have a 30px bottom margin.

3.1 float A, height:30px
3.1 clear B with margin-top:50px

There should be no space between A and B, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

3.2 float A, height:30px
3.2 B with margin-top:50px

Like case 3.1, but without the clear property.

3.3 float A, height:60px
3.3 clear B with margin-top:50px

There should be no space between A and B, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

3.4 float A, height:30px
3.4 clear B with margin-top:50px

Like case 3.1, but with a (blue, border-less) wrapper.
There is no space between A and B and 30px space between A and the preceding paragraph in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

3.5 float A, height:30px
3.5 after B with margin-top:50px

Like case 3.4, but without the clear property.

3.6 float A, height:30px, margin-bottom:5px
3.6 clear B with margin-top:50px

There should be 5px gap between A and B, OK in: Fx, Saf, Op, IE8.
There are 55px gap between A and B, wrong, in: IE7-/Win.


In the fourth series of tests the separating paragraphs with gray background have a 70px bottom margin.

4.1 float A, height:30px
4.1 clear B with margin-top:50px

There should be no space between A and B, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

4.2 float A, height:30px
4.2 B with margin-top:50px

Like case 4.1, but without the clear property.

4.3 float A, height:60px
4.3 clear B with margin-top:50px

There should be no space between A and B, OK in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

4.4 float A, height:30px
4.4 clear B with margin-top:50px

Like case 4.1, but with a (blue, border-less) wrapper.
There is no space between A and B in: Fx, Saf, Op, IE8.
There are 50px gap between A and B, wrong, in: IE7-/Win.

4.5 float A, height:30px
4.5 after B with margin-top:50px

Like case 4.4, but without the clear property.

4.6 float A, height:30px, margin-bottom:5px
4.6 clear B with margin-top:50px

There should be 5px gap between A and B, OK in: Fx, Saf, Op, IE8.
There are 55px gap between A and B, wrong, in: IE7-/Win.

Older similar test cases Float, Clear and following margin-top

CSS tests home