大家估计都遇到这种情况,就是父元素内的子元素设置为浮动,父元素的高度无法跟随子元素的高度而撑大,这就需要清除浮动,估计每个人都有自己的一种解决浮动的方法,而最多的方法应该就是下面这种方法:

.clear{
    clear: both;
    height: 0;
    overflow: hidden;
}

然后就是在清除浮动的地方加个 <div>,然后给 div 挂上这个 clear 类。但是这种方法的最大缺陷就是改变了 HTML 结构,虽然只是加个 div。今天介绍一种不破坏结构的方法:

最佳的清除浮动方法
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *+height: 1%;
}

用法就是在父元素上面挂上 clearfix 这个类,下面是演示

<div class="clearfix" style="background:#666;width:400px">
    <div style="height:100px;width:200px;color:#fff;background-color:red;float:left">红色</div>
    <div style="height:100px;width:100px;color:#fff;background-color:blue;float:right">蓝色</div>
</div>

以上写法就避免了改变 HTML 结构,直接用 CSS 解决了。