浮動圖像向左改變容器div的高度

Question

當我嘗試運行以下命令：

​<div id="container"> 
    //This is a 200x200 image   
    <img src="http://dummyimage.com/200x200/CCC/000" /> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

與CSS：

​#container { 
    background:#000; 
} 

我得到一個黑色背景的容器像我想要一個DIV 。

然而，當我添加以下的CSS：

#container img { 
    float:left; 
} 

好像容器不檢測它裏面的形象和它的高度設置爲最小（在這裏可以看到：http://jsfiddle.net/wc4GJ/）。

如何將圖像向左弄亂容器DIV的高度？

感謝，

喬爾

Answer 1

添加overflow:auto;到#container

（說明如下）

Answer 2

您需要的IMG後添加清除用div：

​<div id="container"> 
    //This is a 200x200 image   
    <img src="http://dummyimage.com/200x200/CCC/000" /> 
    <div class="clearing"></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

而且在CSS：

.clearing { clear: both; }