标签:
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验证.
标签:
原文地址:http://www.cnblogs.com/xmll/p/4889861.html