CSS 清除浮动

方法一：

.cl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.cl { zoom: 1; /* for IE6 IE7 */ }

方法二：

1. .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px; overflow:hidden;}

好处 ：兼容性好不会出现奇怪的错位

缺点：在IE6 和IE7下父元素必须设置宽度才可以起作用

方法三：

2. .clear1 {overflow:auto;zoom:1;}

好处：代码简洁随用随拿，信手拈来。

缺点：容易出现奇怪的滚动框（很容易的哦~~！

方法四：

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

网易方案：

.tab-con:after {clear:both;content: ".";display:block; height:0;overflow:hidden;visibility:hidden;}

新浪方案：

.clearit {clear: both;}

.clearfix:after { clear: both; content: ".";display: block; height: 0;visibility: hidden;}

.clearfix {display: inline-block;}

雅虎方案：

.y-tablist { position: relative;}

.y-tablist:after {clear:both;content: ".";display:block;height: 0;overflow: hidden;visibility:hidden;}

来源：oschina

链接：https://my.oschina.net/u/113858/blog/684869