浮动：左问题

Question

我有这样的东西：

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

而且DIV1似乎已经为0x0大小，而不是为100x100。为什么？

Answer 1

#div1本身没有浮动，所以它似乎并不包含内部的div。浮动需要normal flow中的一个元素，因此#div1种不知道它的孩子了。

要做到这一点，你也需要浮动#div1，或给它overflow: hidden使其包含其内部div的浮点数（或使用clearfix）。

Answer 2

清除浮动：

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

更新：

列表除了对这类事情的好文章：http://www.alistapart.com/articles/css-floats-101/

从文章：

...浮动元素最初计算在no肾错构瘤的流动，然后取出，在#container的元素并不在其范围内考虑，因此行为，如果它甚至不是有..

Answer 3

只需设置

#div1{ 
    overflow:hidden; 
} 

或者添加

<br style="clear:both" /> 

就在＃div1结束标记之前。