常用的清除浮动方式

1.添加一个新元素，添加一个div块，设置clear:both;同时不让它显示

.clear {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
}

2.给父元素添加overflow: hidden;当父层没有设置浮动，而子层设置了浮动时，父层很大可能受到浮动的影响缩成一条，这时使用clear: both;清除浮动是没有效果的，应该使用overflow: hidden;

.over-flow {
    overflow: hidden;
    zoom: 1;  // 处理兼容问题
}

3.最常用的一种方式，在浮动元素的父元素添加:after伪类。这种方法清除浮动是现在网上最拉风的一种清除浮动，它是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html中插入一个div.clear标签，而此方法利用其父元素伪类clear:after在元素内部增加一个类似于div.clear的效果。

.outer {zoom:1;}    /*==for IE6/7 ==*/
.outer :after {
    clear:both;  // 清除所有浮动
    content:'.';
    display:block;
    width: 0;
    height: 0;
    visibility:hidden;  // 允许浏览器渲染它，但是不显示出来
}   /*==for FF/chrome/opera/IE8==*/