在div中浮动元素，在div之外浮动。为什么？

Question

在div中浮动元素，在div之外浮动。为什么？假设你有一个div，比如说你把它涂成绿色，给它一定的宽度，当我把东西放进去的时候，在我的例子中，是一个IMG和另一个div。其思想是，容器div的内容将导致容器div展开，并成为内容的背景。但是当我这样做的时候，包含的div会缩小以适应非浮动的物体，而浮动的物体要么一直出去，要么一半出去，一半进去，而对大div的大小没有任何影响。这是为什么？有什么东西是我缺少的，我如何才能得到浮动的项目，以伸展高度的一个包含的div？

Answer 1

最简单的就是overflow:hidden在父div上，不要指定高度：

#parent { overflow: hidden }

另一种方法是浮动父div：

#parent { float: left; width: 100% }

另一种方法是使用明确的元素：

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span></div>

CSS

span.clear { clear: left; display: block; }