css 清除浮动

虽然我几乎不用 float 布局，但是还是要了解的，工作了很有可能就会用到，所以，今天又看了一遍 “张鑫旭” 写得关于 float 布局的文章，记录一下清除浮动的几种方法，以后随时在此补充。

注意：浮动的时候，下一个兄弟节点会无视浮动节点的位置，将它视为没有，但是兄弟节点的子节点可以看到浮动的节点位置，并以此为边界布局。

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选 zoom:1; 不会干扰任何样式。非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，不过由于后者经常一不小心出现滚动条，所以前者用的更多些。由于现代浏览器都支持 after 伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。下面小结这几个方法。

注意：这几种方法是为了解决“浮动带来的，父元素高度塌陷问题”。

1. 投机取巧法

2. overflow + zoom方法

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

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用这个方法，只是有时候顺便去除浮动时用用。

3. after + zoom方法

.fix{zoom:1;}
.fix:after{display:block; content:‘clear‘; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。

另外，JavaScript 下添加 float 样式的方法有点不同：

IE浏览器：

obj.style.styleFloat = "left";

其他浏览器：

obj.style.cssFloat = "left";


资源： http://www.zhangxinxu.com/wordpress/?p=594

css 清除浮动

原文：http://www.cnblogs.com/xiaochechang/p/5834208.html