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

Question

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

Очень важно, чтобы решение работало в IE.

Answer 1

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

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

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

Answer 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/

Answer 3

Нужно, чтобы clear всплыли элементы, высота их родителей рухнет.

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

overflow -метод:

CSS:

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

Markup:

<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; }

Markup:

<div class="wrap cf">

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

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

</div>

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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