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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:12 UTC

On 14/02/2012 8:26 PM, fantasai wrote:
> On 02/14/2012 05:48 AM, Alan Gresley wrote:
>>
>> If this is the case, then 9.4.1 [1] should also state that 'display:
>> table' and 'display: table-row' also establish a new BFC
>> since boxes with these display values also have the same behavior when
>> beside floats.
>
> Table rows don't establish block formatting contexts, but wrt table
> boxes, see
> http://www.w3.org/TR/CSS21/tables.html#model
>
> ~fantasai

This may be true by way of concept of the spec but the reality is 
different (see test below).

(note how the margins of the <p> do not collapse)

<!doctype html>

<style>
#float {
    float: left;
    width: 200px;
    height: 100px;
    border: 10px solid blue;
}
#table {
    background: yellowgreen; display: table;
}
p { background: yellow; }
</style>

<div id="float">Float</div>

<div id="table">

   <p>Block</p>
   <p>Block</p>
   <p>Block</p>
   <p>Block</p>
   <p>Block</p>
   <p>Block</p>

</div>

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