css学习笔记(1)

在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的高度就等于子标签的最大高度了。