拉伸元素，即使其子元素处于浮动状态

Question

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

如何使#wrapper随#wrapper的高度#child ？

Answer 1

您必须通过clear：both清除浮点数，以便包装盒知道结尾。

<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自动； 初始高度（以px为单位）是您要从其开始的高度，而auto将允许其根据其子代的高度进行调整