Re: [CSS2.1] Flow control interop

Looking at it again I think I'm wrong about the 1st test case. It does have
clearance.

<div style="overflow:hidden;">
    <div id="normal">
        <div style="float:left;" id="float">float</div>
        <div style="margin-top: 50px; clear:left" id="clear">clear</div>
    </div>
</div>

- With clear: none, margin-collapsing means that the float and 'clear' are
flush with each other, 50px from the top of the block-formatting context.

- So we need to introduce clearance to clear the float.

- Introducing clearance means that the float is no longer pushed down by
50px, as 'normal' no longer collapses with 'clear'.

So what is our clearance? Regardless of which method used it must be
negative as any positive clearance, when added to the margin-top of 50px,
will push it more than 30px below the float.

In IE, it uses the negative value to put the 'clear' element 50px below the
top of the block-formatting context. In Blink/WebKit/FF a negative value is
chosen that allows the 'clear' element to sit directly under the float.

So both behaviours are correct per the latitude allowed in the spec.

Interoperability aside, in Blink's case I think the bug you've found is in
case 2, where no clearance applies, and where Blink ought to place the
'clear' element 30px below the float just as it would with clear:none. That
is a bug I will take and fix assuming no one points out an error in my
understanding.

To the broader question of choosing 'clearance' values that go as far down
as possible vs starting at the bottom of the lowest float - I think it
would be an easier and shorter process for IE to start matching all the
others rather than the other way round. Again, unless there's a good reason
not to.

Thanks,
Robert



On Sun Nov 16 2014 at 9:48:22 PM Robert Hogan <robhogan@chromium.org> wrote:

> Hi Greg,
>
> Strictly speaking there is no clearance introduced in any of your test
> cases!
>
> This is because: "Computing the clearance of an element on which 'clear'
> is set is done by first determining the hypothetical position of the
> element's top border edge. This position is where the actual top border
> edge would have been if the element's 'clear' property had been 'none'. *If
> this hypothetical position of the element's top border edge is not past the
> relevant floats, then clearance is introduced,* and margins collapse
> according to the rules in 8.3.1." - http://dev.w3.org/csswg/
> css2/visuren.html#clearance
>
> The emphasis is mine: in each case the hypothetical position of the
> element's top border edge is past the float so no clearance is necessary.
>
> This leads to the conclusion that IE's rendering of cases 2 and 3 is
> correct, but the rendering of the 1st is not:
>
> <div style="overflow:hidden;">
>     <div id="normal">
>         <div style="float:left;" id="float">float</div>
>         <div style="margin-top: 50px; clear:left" id="clear">clear</div>
>     </div>
> </div>
>
> The "float" should be pushed down by 50px as "normal" has received a
> margin of 50px from "clear" - the lack of actual clearance means that
> margin-collapsing was allowed between 'normal' and 'clear'.
>
> I'm fully behind making Blink fall into line with the right behaviour but
> by my reading above no browser is currently correct in all three cases.
>
> Is my reading correct?
>
> Thanks,
> Robert
>
> On Thu Nov 13 2014 at 11:15:13 PM Greg Whitworth <gwhit@microsoft.com>
> wrote:
>
>> Hello everyone,
>>
>> Got another interop issue I would like to get alignment regarding floats
>> and clearance. Here is a set of examples: http://jsfiddle.net/d83gt4d8/5/
>>
>> The relevant part of the spec is[1]:
>>
>>         "Then the amount of clearance is set to the greater of:
>>                 1. The amount necessary to place the border edge of the
>> block even with the bottom outer edge of the lowest float that is to be
>> cleared.
>>                 2. The amount necessary to place the top border edge of
>> the block at its hypothetical position.
>>                 Alternatively, clearance is set exactly to the amount
>> necessary to place the border edge of the block even with the bottom outer
>> edge of the lowest float that is to be cleared.
>>
>>         Note: Both behaviors are allowed pending evaluation of their
>> compatibility with existing Web content. A future CSS specification will
>> require either one or the other.
>>         Note: The clearance can be negative or zero. "
>>
>> IE is currently doing the max of 1 and 2, but the Note makes it so that
>> basically every browser is "spec compliant." We're willing to match
>> FF/Blink/Webkit but we would like it if FF/Blink/Webkit could agree as well
>> and then we can get this specified (You'll notice Gecko and Blink/Webkit do
>> not agree on the second one). This would allow us to get rid of that note
>> and gain more interop.
>>
>> Thank you!!!
>>
>> Greg
>>
>> [1] http://www.w3.org/TR/CSS21/visuren.html#flow-control
>>
>>
>>
>>
>>