Re: [CSS21] BFC may become narrower and collide with a previous float

On 26/01/2012 8:23 PM, Morten Stenshorne wrote:
> fantasai<fantasai.lists@inkedblade.net>  writes:
>
>> Dear Layout Engineers,
>>
>> http://lists.w3.org/Archives/Public/www-archive/2012Jan/att-0035/foo.html
>>
>> Really?
>>
>> <style>
>>    #a { float: left; }
>>    #b { float: right; }
>>    p  { width: 100px; height: 100px; }
>>    div { width: 190px; }
>> </style>
>>
>> <div>
>> <p id=a>FLOAT LEFT</p>
>> <p id=b>FLOAT RIGHT</p>
>> <table><tr><td>table table table table table table table table</table>
>> </div>
>>
>> +------------------------+
>> |+------------+ +-------+|
>> || FLOAT LEFT | | table ||
>> ||            | | table ||
>> |+------------+ | table ||
>> |          +------------+|
>> |          |FLOAT RaGlT ||
>> |          |      table ||
>> |          +------------+|
>> |               | table ||
>> |               +-------+|
>> +------------------------+
>
> Nice! All the browsers are bug-compatible, except IE10, which gets it
> right instead.

> Narrowing the BFC isn't really necessary, BTW. You see the same bug
> with:

> It gets too tall to fit above the yellow float (or beside the blue
> float, if you like), so it should be moved down, beside the yellow
> float. But that increases the available width (which, if properly laid
> out again, also should reduce its used height by a lot).
>
> Determining the position (and layout) of the BFC block without taking
> its used height into consideration is a mistake when we want to satisfy
> http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float .
>
> This issue is already filed in Opera's BTS, BTW.


This rule does not apply. If a BFC can fit beside the first float, then 
it will flow beside it. Read this part of the spec.

   | If necessary, implementations should clear the
   | said element by placing it below any preceding
   | floats, but may place it adjacent to such floats
   | if there is *sufficient space*.

There is *sufficient space* for the BFC in your two test case as well as 
the examples in this test case.

http://css-class.com/test/css/visformatting/floats-with-block-elements2.htm

What IE8, IE9 and IE10 does is wrong. I have known about this issue 
since 2008 and I first reported this behavior on this list in 2008.

http://lists.w3.org/Archives/Public/www-style/2008Jun/0201.html



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Friday, 27 January 2012 11:46:38 UTC