On 2006-12-29, Harris Kosmidhs <hkosmidi@remove.me.softnet.tuc.grwrote:
[snip]
Quote:
Quote:
>[1] divs _do_ grow to contain the divs inside them if they are
>themselves the "block formatting context boxes" for the floats, which
>they are if they are floated or positioned themselves.
>>
>So we can fix this another way without moving the borders to extra
>separating divs by adding this to div.links:
>>
> float: left;
> clear: left;
> width: 100%;
>
yes it works thanks.
But I would like to clear this out a bit. How float affects div's
height? I thought float is used to position -maybe not the right word
here, forgive my english- the element to its parent element.
Yes it is. But a float also "establishes a new block formatting
context", which means it grows to fit the floats inside it in.
In this case the float doesn't actually visibly float to the left itself
because we make it width: 100%. We make it float:left not to make it
float to the left, but just to get the sideffect of starting a new block
formatting context.
Normally floats overflow their containers. This is so you can write
content like this:
<ptext blah blah <img style="float: right;" src="foo.png"</p>
<pmore text blah blah blah </p>
In this example, if the first paragraph grew to fit the float in,
there'd be a vertical gap between the two paragraphs. This is less
desirable than the second paragraph starting in its proper place,
immediately below the first paragraph, but also flowing around the
float.
So that's why the float overflows its containing box. But it doesn't
overflow its block formatting context box.
CSS 2.1 9.4.1:
"Floats, absolutely positioned elements, inline-blocks, table-cells, and
elements with 'overflow' other than 'visible' establish new block
formatting contexts."
And then in CSS 2.1 10.6.7 ("'Auto' heights for block formatting context
roots"):
"In addition, if the element has any floating descendants whose bottom
margin edge is below the bottom, then the height is increased to include
those edges. Only floats that are children of the element itself or of
descendants in the normal flow are taken into account, e.g., floats
inside absolutely positioned descendants or other floats are not."
Why these extra rules?
One possible reason is to make the implementation easier. Floats are
already harder to implement than most things in CSS because text in
sibling, descendent, or descendent-of-sibling blocks has to be flowed
around them. This introduces extra complexity by breaking the assumption
that you can make almost everywhere else that the layout of an element
is only affected by its ancestors and descendents. If you can keep
floats inside their block formatting contexts however, you can limit
that complexity a bit.
