Re: [CSS21] Floating - who's right?

On 5/02/2011 11:42 PM, Anton Prowse wrote:
> On 05/02/2011 02:08, fantasai wrote:

>>> the positioned element appears to have a height equal to the one of
>>> the floated element.


This is correct.


> The reason is quite simple: div.positioned "starts" at the top of the
> content area of body, since the float is out of flow and doesn't
> influence the location of div.positioned. Hence the float and
> div.positioned intersect. (This is very typical of floats and
> surrounding in-flow elements.) Now, div.cleared is empty and has zero
> height. If you remove the clear:left, its parent div.positioned has zero
> height. But with clear:left, div.cleared sits flush with the bottom of
> the float, "forcing" div.positioned to have positive height equal to the
> height of the float. (The thing that Васил might have been confused
> about is that div.position doesn't get "dragged down" with div.cleared;
> its top remains at the top of the content area of body. The situation
> would be quite different if it were div.positioned which had clear:left
> rather than its child.)


Anton, how can this be normal? This is not what clear: left is supposed 
to do. Try this test.


<!DOCTYPE html>

<style type="text/css">
   .floated { float:left; background: lime; font-size: 300%; }
   .wrap { background: salmon; }
   .cleared { clear:left; }
   .normal { background: blue; }
</style>

<body><div class="floated">float</div><div class="wrap"><div 
class="cleared"></div></div><div class="normal">Normal block</div></body>


How it it possible for the div.wrap to grow as big as the float? It's 
like it inheriting the float height.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Saturday, 5 February 2011 14:14:13 UTC