Рост высоты родительского div, который содержит плавающие вложенные divs

Я не могу автоматически вырастить родительскую высоту div на основе своих плавающих дочерних div. Все дети плавают, чтобы заняться пространством горизонтально, а затем завернуть на следующую строку. Там может быть изменение числа плавающих детей, и родитель должен авторизовать его высоту. (Родительский div служит фоном для всех плавающих div). Существует также второй div ниже родительского div, который нужно сдвинуть вниз, чтобы он находился ниже плавающих div.

Важное значение имеет то, что решение работает в IE.

Ответ 1

Если родительский контейнер имеет только плавающие дочерние элементы, он не будет иметь высоты. Добавление следующего CSS в родительский контейнер должно помочь:

.parent {
    overflow:hidden;
    width: 100%;
}

Подробнее читайте в этой статье: http://www.quirksmode.org/css/clearing.html.

Ответ 2

Вы можете вставить div, который очищает флоутеры после последнего дочернего элемента.

HTML:

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

скрипт: http://jsfiddle.net/Rc5J8/

Ответ 3

Вам нужно clear плавающие элементы, высота их родителей рухнет.

Текущий принятый ответ правильный, однако обычно рекомендуется очищать float, применяя clearfix hack или overflow: hidden к оберточному родительскому элементу, чтобы поля продолжать функционировать так, как ожидалось, и избавиться от пустого элемента HTML.

`overflow` -метод:

CSS

.wrap { overflow: hidden }
.box  { float: left; }

Разметка:

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

Метод `clearfix`, как указано выше:

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

Разметка:

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

Ответ 4

Вы должны использовать метод clearfix для содержащего div

http://www.webtoolkit.info/css-clearfix.html

Это устраняет необходимость добавления дополнительной разметки.

Ответ 5

Добавление свойства overflow css в родительский элемент устранит проблему (нет необходимости в пустом и уродливом элементе div, чтобы очистить float):

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

Я добавил свойства display и width, потому что некоторым браузерам нужны тезисы, которые нужно определить.

Ответ 6

Вам необходимо применить clearfix к родительскому элементу, поскольку поплавки удалены из потока документа, а не автоматически добавлять высоту в родительское содержимое. Clearfix инструктирует родителя расширять до высоты, достаточно высокой, чтобы очистить свой последний плавающий ребенок. Этот метод хорошо установлен и работает в разных браузерах.