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

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

5 109
css css-float liquid-layout

5 ответов:

добавить следующее имущество:

.c{
    ...
    overflow: hidden;
}

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

обновление

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

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

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

267

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

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

это не так просто?

.c {
    overflow: auto;
}
17

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

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

4

лучшее и самое пуленепробиваемое решение-добавить ::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.

1