如何使内部div推动外部div

Question

假设我有一个div。在这个div中，我相信两个div左右浮动，彼此相邻。左边的div用于图片。出于某种原因，当图片太高时，它不会推动外部div以适应图片。相反，图片只是自己继续前进并“超出”外部div的底部边界。我怎样才能使图片扩展外部div？

<div>
    <div class="left">
    </div>

    <div class="right">
    </div>
</div>

Answer 1

<div style="overflow: auto">
    <div class="left">
    </div>

    <div class="right">
    </div>
</div>

Answer 2

将“overflow: auto;”或“overflow: hidden;”添加到包含div中都是很好的解决方案（每个都有自己的怪癖，具体取决于具体情况，但非常可靠）。你需要添加hasLayout才能在IE中工作。最简单的是添加：

.container {
  overflow: hidden;
  display: inline-block; /* triggers hasLayout in IE */
}

.container {
  display: block; /* back to block */
}

此处有更多选项： http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 3

如果你有一个带有两个元素的div，那么没有浮动的最大元素会推动外部div。如果你有一个带有两个浮动元素的div，你需要一个带有clear的div：两者都允许一切都被推下来。