On Mon, Oct 28, 2013 at 2:11 PM, Robert Hogan <robhogan@gmail.com> wrote:
> HI Bruno,
>
> That seems sensible. However I'm having trouble making sense of the
> case where negative margins are involved.
>
> <div id="parent">
> <div id="float" style="float:left; height: 100px; width: 100px;
> background-color:blue;"></div>
> <div id="self-collapsing-with-clearance" style="clear: both;
> margin-top: -40px; margin-bottom:40px;"></div>
> <div id="following-sibling">Text</div>
> </div>
>
> FF and IE both render the 'Text' 40px below the float. Can you help me
> understand why?
>
Following the same lines as before, I believe that here a clearance of
140px is needed to put the top border edge of
self-collapsing-with-clearance just after the float. The margins of
self-collapsing-with-clearance collapse to zero and its margin edge (both
top and bottom) is 40px below the float (the top border edge is "outside" /
higher than the margin edge).
following-sibling the starts at 40px below the float.
Bruno