清除浮动

<style type="text/css">
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block; 
clear: both;
}
</style>

清除浮动的最简写法。\20是一个空白符，没有高度，所以不用加visibility：hidden

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

 bootstrap的写法

.clearfix {
 *zoom: 1;
}

.clearfix:before,.clearfix:after {

display: table;
 line-height: 0;
 content: "";
}

.clearfix:after {
 clear: both;
}

 Unicode字符里有一个“零宽度空格”，即 U+200B ，使用这个字符替代content的内容“点”，可以缩减代码量——因为这个字符本身就是不可见的，所以不必再重复使用 visibility:hidden; 来把它藏起来。然后代码就变成了下面这样：

.clearfix:after{clear:both;content:"\200B";display:block;height:0;}
.clearfix{*zoom:1;}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.clearfix{
    zoom:1;
}