float:left question

I have 开发者_Go百科stuff like:

<div id="div1">
<div style="float:left;width:100px;height:100px;"></div>
</div>

And the div1 appears to have 0x0 size instead of 100x100. Why?

#div1 isn't floated itself, so it doesn't appear to contain the inner div. Floating takes an element out of normal flow, so #div1 sort of isn't aware of its child anymore.

To make it do so, you need to float #div1 too, or give it overflow: hidden to make it contain its inner div's float (or use a clearfix).

Clear the float:

http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/

Update:

A List Apart has a good article on this type of thing: http://www.alistapart.com/articles/css-floats-101/

From the article:

...floated elements are originally calculated in the normal flow and then removed, the #container element doesn’t consider it within its bounds and therefore acts as if it isn’t even there..

Just set

#div1{
    overflow:hidden;
}

Or add

<br style="clear:both" />

just before #div1 closing tag.