浮動：左問題

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結束標記之前。