Как заставить div расти в высоту, когда плавает внутри

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

Ответ 1

overflow:auto; в содержащем div делает все внутри него (даже плавающие элементы) видимым, а внешний div полностью обертывается вокруг них. См. этот пример.

Ответ 2

Во многих случаях overflow: auto; будет достаточно, но для завершения и поддержки кросс-браузера посмотрите Clearfix, который выполнит работу для всех браузеров.

Рассмотрим следующую разметку.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Наряду со следующими стилями.

.content { float:left; }

.clearfix { ..from link.. }

Без clearfix родительский div не будет иметь высоту из-за его плавающих детей. Clearfix заставит родителя учитывать плавающие дочерние элементы.

Ответ 3

Есть более чем один способ очистки поплавков. Вы можете проверить их здесь:
http://work.arounds.org/issue/3/clearing-floats/

Например, clear:both может работать для вас

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

Ответ 4

Я понял, что отличный способ сделать это - установить display: table на div.