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

Question

假设您有一个div，给它一个定值width，然后在其中添加元素，在我的情况下为img另一个div。

这个想法是容器的内容div将导致容器div伸展，并成为内容的背景。但是，当我这样做时，包含div的对象会缩小以适合非漂浮的对象，并且漂浮的对象将要么全部伸出，要么一半伸出，一半进入，并且对big的大小没有任何影响div。

为什么是这样？有什么我想念的东西，怎么才能让漂浮的物品伸出height其中的东西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; }