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

121

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

— pedrozath
источник

278

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

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Развернуть фрагмент

— JakeParis
источник

7

Да, вроде работает, но есть опасность появления полос прокрутки .. верно?

— pedrozath 05

1

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

— JakeParis 05

2

Я попробовал это, и справа от окна браузера появилась крошечная полоса прокрутки высотой около 2 мкм.

— Найджел Олдертон

1

@NigelAlderton, это происходило для меня, потому что я задавал высоту контейнера (где overflowбыл добавлен). Исправлено удалением overflow: auto;из класса, а также heightселектора

— eggy

16

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

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

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

#element { zoom:1; }

— Никита Рыбак
источник

1

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

— Дэн

overflow: auto создал для меня горизонтальную полосу прокрутки, поэтому я не мог ее использовать. Это сработало отлично.

— Эдвин Стотелер,

Именно то, что я искал. Применил этот CSS к родительскому элементу. Он увеличивает высоту родительского <div>, так что перемещаемый элемент остается внутри него. Элегантно, потому что в нем четко сказано, что «нижняя часть родительского элемента должна очищать поплавок».

— IAM_AL_X

12

Во многих случаях 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 заставит родителя рассмотреть плавающих детей.

— miphe
источник

2

Clearfix - это дополнительная разметка. Просто дайте родительскому div разметкуoverflow: auto;

— JakeParis 05

7

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

— pedrozath
источник