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

(以下说明)