如何使内部 div 将外部 div 向下推答案

【问题标题】：How to make an inner div push the outer div down如何使内部 div 将外部 div 向下推
【发布时间】：2011-01-23 09:38:15
【问题描述】：

假设我有一个 div。在这个 div 里面，我相信我有两个 div 向左浮动，彼此相邻。左边的 div 是一张图片。由于某种原因，当图片太高时，它不会推动外部 div 以适应图片。取而代之的是，图片只是继续自行运行并“超出”外部 div 的底部边框。我怎样才能使图片也扩展外部div？

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果你有一个包含两个元素的 div，最大的未浮动元素将推动外部 div。如果您有一个带有两个浮动元素的 div，您将需要一个带有 clear:both 的 div 以允许所有内容都被向下推。

【讨论】：