Как сделать, чтобы внутренний 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 с двумя плавающими элементами, вам понадобится div с clear: обоими, чтобы все можно было сдвинуть вниз.