浮动图像向左改变容器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; }