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

On 31/01/2012 6:10 AM, Rossen Atanassov wrote:
>> -----Original Message----- From: Alan Gresley
>> [mailto:alan@css-class.com] Sent: Friday, January 27, 2012 3:46 AM
>>
>> 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.
>>
>
> As Fantasai already pointed out, the keyword here is sufficient
> *space* not *width*. In her test case the table BFC has specified,
> computed and used height of 300px which will results in a collision
> with the right (blue) floater box regardless of its width, thus the
> rule applies and the BFC should be cleared. If you don't think this
> is true, can you be more specific (in the context of the original
> example) as to why the space should be sufficient?
>
> Fantasai's example
> http://lists.w3.org/Archives/Public/www-archive/2012Jan/att-0035/foo.html
>
>  Thanks, Rossen

Hell Rossen,

The spec's reference to 'space' is a visual 'width' between the left 
float (magenta) and <div> container. It doesn't matter what the computed 
and used height of the BFC table is. There is nothing in the spec that 
says that the BFC table should clear the left float (blue).

What you are seeing is the result of the another rule (9.5.1 - rule 3 
[1]) where the right float (blue) must clear the left float (magenta) 
and in doing so, results in an overlap.

Here is a test case based on Fantasai's test case. I have removed the 
height of the table since it is of no importance.

<!DOCTYPE html>
<style>
   div { width: 190px; border: solid thick silver; }
   p   { width: 100px; height: 100px;
         border: dashed; background: yellow; margin: 0; }
   #a { color: magenta; float: left; }
   #b { color: blue;    float: right; }
   table { /* height: 300px; */
           border: double green; }
   td { background: palegreen; }
</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 
table table table table table table table table table table table table 
table table table</table>
</div>


3. http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#float-position



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

Received on Monday, 30 January 2012 23:59:20 UTC