Collapse-through and clear

Could someone please clarify how one positions a block that comes after
a zero-height block that has clearance? The following example
is taken from Hixie's set of margin-collapse tests (somewhat simplified):

<style>
 .A { float: left; height: 4em;  }
 .B { clear: left; }
 .C { margin-top: 2em;  }
</style>

<div class="test">
 <div class="A"> A </div>
 <div class="B"></div>
 <div class="C"> C </div>
</div>

According to section 9.5.2 block B will need clearance
of 4em, and will be placed flush with the bottom edge
of the float A. But where will block C be placed?
According to the test case, it should also be flush
with the bottom edge of A. Why? What happens to its
margin of 2em?

In older versions of the CSS spec, the clear property
was handled by increasing the top margin of B. In this case,
it would have meant that B got a top margin of 4em.
Then, the top margin of C would have collapsed with the
top margin of B, and C would have been placed 4em below the
top of A, that is, flush with the bottom of A.

But with the introduction of clearance as an extra amount
of space above the top margin of B, the block B will not
have any margin that C can collapse with. So how is the
position of C calculated?

Anders Edenbrandt

Received on Tuesday, 23 May 2006 23:41:27 UTC