CSS常用清除浮动方法总结

1.对父元素使用overflow:hidden;zoom:1，或者是overflow:auto;zoom:1。

兼容性问题：该处使用zoom:1是为了兼容ie6，但是实际上，用height:1%;代替zoom:1;更好，因为它可以通过W3C。

该方法缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2.在浮动元素后面添加新的元素，再使用clear:both。缺点：无意义的空标签，不利于语义化。

3.给浮动元素的父元素使用:after伪元素。如下：

 .outer{zoom:1;}

 .outer:after{

clear:both;

display:block;

content:".";

width:0;

height:0;

visibility:hidden;

} 

其中content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

同时，由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。

 

关于zoom:1

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
但很遗憾的是，它通不过W3C验证．

 

转载于:https://www.cnblogs.com/xmll/p/4889861.html