"Florian Brucker" <torf@torfbold.com> wrote in message
news:2ij2v0Fns282U1@uni-berlin.de...[color=blue]
> Hi!
>
> I've got a problem with float & clear. Take this example code:
>
> <div style=" width:100px; height:100px; background-color:#FF0000;
> float:left; margin:10px;"></div>
> <span style="clear:left;">This is some text</span>
>
> In Mozilla 1.6 the span still floats around the image on the left side
> (as if there wasn't a "clear" option). When I use
>
> <h1 style="clear:left;">This is some text</h1>
>
> instead of the span it works as it should (using the h1 without the
> clear-option gives the right result, too, the heading floats around the
> image on the left side).
>
> Is this behaviour correct (according to the specification)?[/color]
I think so. When you have both blocks and freestanding inlines inside a
block, for formatting purposes the user agent essentially wraps the inlines
in their own anonymous blocks. So your code is treated as:
<div style=" width:100px; height:100px; background-color:#FF0000;
float:left; margin:10px;"></div>
<div><span style="clear:left;">This is some text</span></div>
I think the "clear: left;" is acting only within the context of the span's
enclosing anonymous div. Since, in that div, it's not preceded by anything
that floats, it has no effect.
[color=blue]
> If yes, how
> can I achieve the desired result (the span acting like there was a <br
> clear="all"> infront of it)?[/color]
So the solution is to put the span inside an explicit div, and give the div
the "clear: left; " style.
I would suggest that it's good coding practice in general for a block not to
have both blocks and inlines as immediate children.
