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

Question

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

Answer 1

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

.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>

Answer 2

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

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

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

#element { zoom:1; }

Answer 3

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

Answer 4

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