左侧的浮动图像会更改容器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; }