总结清楚浮动的几种方法

1、方法一：在浮动元素的下面添加空的div

    空的div{

        clear:both;height:0;overflo:hidden;

     }

2、方法二：给浮动元素的父级元素设置高度（注：如果浮动元素的高度不确定，则不适用，不推荐）

3、方法三：br清浮动

<br clear="both" />;但是不符合工作中结构、样式、行为三者分离（不推荐）

4、方法四：给父元素添加overflow:hidden（存在IE6，7的兼容问题）

父元素{

    overflow:hidden;

    zoom:1; //解决IE6，7兼容问题

 }

5、给父元素设置inline-block

缺点：父元素的margin左右auto失效，无法使用margin:0 auto;居中，也会存在IE兼容问题

6、万能的清楚浮动（伪类）

给浮动的父元素添加clear类

.clear:after{

    content:'.';

    clear:both;

    display:block;

    height:0;

    overflow:hidden;

    visibility:hidden;

 }

.clear{

    zoom:1;//（解决IE6，7兼容问题）

}