在div的子标签中使用浮动属性,且没有对div定义高度,要想达到包含子标签的高度时,必须使用clearfix。
例如
<div class="search">
<div class="chart-right-gap">
城市
</div>
<div class="chart-right">
省市
</div>
</div>
//css代码
.chart-right-gap{
height: 300px;
background: #778;
float: left;
}
.chart-right{
height: 300px;
background: #558;
float: right;
}
我们通过调试工具可以看到,最外层的div高度始终为0。如果我们想让它的高度等于子标签最大高度,应该使用clearfix。
我们对代码修改如下:
<div class="search clearfix">
<div class="chart-right-gap">
城市
</div>
<div class="chart-right">
省市
</div>
</div>
//css代码
.chart-right-gap{
height: 300px;
background: #778;
float: left;
}
.chart-right{
height: 300px;
background: #558;
float: right;
}
现在,div的高度就等于子标签的最大高度了。