"Florian Brucker" <to**@torfbold.com> wrote in message
news:2i************@uni-berlin.de...
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)?
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.
If yes, how
can I achieve the desired result (the span acting like there was a <br
clear="all"> infront of it)?
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.