Float clearing a float when inside a self-collapsing block with margin-top

• From: Robert Hogan <robhogan@gmail.com>
• Date: Mon, 26 Nov 2012 19:12:46 +0000
• To: www-style@w3.org
• Message-ID: <CAD1xn+Mt1gUpmQXtAJkJB9X1j1+re9rpr2WqeaPEom9wWN=0-g@mail.gmail.com>

Hi there,

It seems like the correct position of the black float in this snippet
is directly below the blue float:

<p>The blue box should be stacked on top the black box.</p>
<div style="height: 20px; width:20px; float:left; background: blue;"></div>
<div style="margin-top:10px; clear:both;">
    <div style="height: 20px; width:20px; float:left; background: black;"></div>
</div>

(https://bug-103116-attachments.webkit.org/attachment.cgi?id=175878)

However if we follow http://www.w3.org/TR/CSS21/visuren.html#clearance
the outer top of the black float's parent (which is a self-collapsing
block) should be halfway down the blue float, because the remaining
10px of the blue float's height is accounted for by the
self-collapsing block's 10px of top-margin.

So with this in mind, it's not clear to me what, in the spec, forces
the black float to only go as far as the top border edge of its parent
(so that it clears the blue float completely) rather than the outer
top of its parent as it would normally do (where it will avoid the
blue float rather than clear it).

Please help!

Thanks,
Robert

Received on Monday, 26 November 2012 19:13:16 UTC