清除浮动的几种方法

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

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

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

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";/*其他浏览器*/