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

Question

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

Answer 1

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

.c{
    ...
    overflow: hidden;
}

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

UPDATE

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

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

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

Answer 2

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

div style = "clear: both" очищает плавающее значение и дает правильную высоту контейнера.см. 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>

Answer 3

Не проще ли?

.c {
    overflow: auto;
}

Answer 4

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

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

Answer 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; свойство, тогда вам не нужно добавлять какие-либо ясные исправления.