Css 左侧的浮动图像将更改容器div'；s高度

当我尝试运行以下操作时：

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

​我得到了一个有黑色背景容器的DIV

但是，当我向CSS添加以下内容时：

#container img {
   float:left;
}

容器似乎没有检测到其内部的图像，并且其高度设置为最小值（可以在此处看到：）

为什么向左浮动图像会弄乱容器DIV的高度

谢谢

---

Joel

您需要在img之后添加清算div：

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

---

添加

溢出：自动至
#容器

（解释如下）
原因是什么？container DIV不应该识别其中的图像吗，即使它是浮动到左边的？对于我来说，将youtube视频嵌入到一个聚合物容器列表中效果很好，其中overflow:auto没有很好地完成工作（视频展开，列表中的后续容器被撞倒，但嵌入容器没有展开）为什么要将添加图像（具有固定的宽度和高度）视为DIV的溢出？因为浮动将元素从流中取出，这意味着父元素中不再包含任何决定其高度的内容。添加溢出：隐藏/自动；发送给父级以确保其内容正确包装。Genius。非常感谢。
​<div id="container">
     //This is a 200x200 image        
     <img src="http://dummyimage.com/200x200/CCC/000" />
     <div class="clearing"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.clearing { clear: both; }