CSS中zoom属性和overflow:auto属性清除浮动的作用详解

作者:MJ 发布于:2012-10-31 7:24 Wednesday 分类:Css

在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局,但是如果外面这个大容器的没有设置固定的高度值,那么大容器高度不会随着里面小容器高度变化而变化,产生内容溢出的现象,这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性,可以解决IE7和火狐浏览器下的清除浮动问题,但是IE6下不生效,所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。

在线演示:


标签: 清除浮动

发表评论:

Powered by 588cy.com