阅读张鑫旭的文章才明白：

     浮动的本来只是让文字环绕图片显示，其他所有用浮动实现的效果其实都不应是浮动应该做的事情，所以网页布局方面慎用float。具体前因后果我就不多说了，有兴趣的可以前往其博客：

我这边仅记录一下博客里面介绍的清除浮动的几种方法：

1. after + zoom 方法(通用性强，推荐)

 

.wrap{
       zoom:1;}.wrap:after{
       display: block;    content: 'clear';    clear: both;    line-height: 0;/*也可以写成heihgt: 0*/    visibility: hidden;}

 

2. overflow + zoom 方法:

 

.father{
        overflow: hidden;     zoom: 1;}

 

涵盖所有浏览器，但是 overflow: hidden; 有隐患，如果里面的元素需要设置margin负值或是负的绝对定位，就会被隐藏掉。

 

3. 添加空标签(冗余空标签)

 

在最后一个子标签后面加一个 <div style="clear:both;"></div> 

 

4. 使用javascript改变css的属性：

 

obj.style.styleFloat = "left";/*IE*/ obj.style.cssFloat = "left";/*其他浏览器*/