即使子元素浮动，也要拉伸元素

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

向父div添加clearfix类。这是CSS：Fiddle

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

Answer 3

给父母一个高度：0px auto; px中的初始高度是你想要的开始，auto会允许它根据子项的高度进行调整