CSS-контейнер div не получает высоту

Я хочу, чтобы мой контейнер div получал максимальную высоту своих детей. не зная, какую высоту будет иметь ребенок div. Я пробовал JSFiddle. Контейнер div находится на красном. который не появляется. Почему?

Ответ 1

Добавьте следующее свойство:

.c{
    ...
    overflow: hidden;
}

Это заставит контейнер уважать высоту всех элементов внутри него, независимо от плавающих элементов.
http://jsfiddle.net/gtdfY/3/

UPDATE

Недавно я работал над проектом, который требовал этого трюка, но ему нужно было позволить переполнению, поэтому вместо этого вы можете использовать псевдоэлемент, чтобы очистить ваши поплавки, эффективно добиваясь того же эффекта, позволяя переполнять все элементы.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

Ответ 2

Вы плаваете над детьми, что означает, что они "плавают" перед контейнером. Чтобы взять правильную высоту, вы должны "очистить" поплавок

div style = "clear: both" очищает плавающее значение a и дает правильную высоту контейнеру. см. http://css.maxdesign.com.au/floatutorial/clear.htm для получения дополнительной информации о поплавках.

например.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

Ответ 3

Не проще?

.c {
    overflow: auto;
}

Ответ 4

Попробуйте вставить этот очищающий div перед последним </div>

<div style="clear: both; line-height: 0;"> </div>

Ответ 5

Лучшим и наиболее пуленепробиваемым решением является добавление в контейнер ::before и ::after псевдоэлементов. Поэтому, если у вас есть список например:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

И каждый элемент в списке имеет свойство float:left, затем вы должны добавить в свой css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Или вы можете попробовать свойство display:inline-block;, тогда вам не нужно добавлять clearfix.