Растянуть элемент, даже если его дочерний элемент является плавающим

Question

<div id="wrapper" style="background:red;">
 <div id="child" style="height:500px;float:left;"></div>
</div>

Как мне сделать #wrapper растяжку с высотой #child?

Answer 1

Вы должны очистить поплавок с помощью clear: оба, чтобы обертка знала конец.

<div id="wrapper" style="background:red;">
 <div id="child" style="height:500px;float:left;"></div>
 <div style="clear:both;"></div>
</div>

Answer 2

Добавьте класс clearfix к родительскому div. Вот CSS: Скрипка

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }         
.cf:after { clear: both; }

Answer 3

дать родителю высоту: 0px auto;Начальная высота в px - это то, с чего вы хотите начать, и auto позволит это настроить в зависимости от высоты его дочерних элементов