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

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

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

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

上demo：

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动</title>
</head>
<style type="text/css">
	.box {
		width: 300px;
		height: auto;
		background-color: #000;
		margin: 100px auto;
		padding: 5px;
	}
	.box h2 {
		width: 300px;
		line-height: 24px;
		color: #ccc;
	}
	.xx {
		width: 140px;
		float: left;
		height: 24px;
		overflow: hidden;
		padding: 0px 5px;
		line-height: 24px;
		color: #ff9933;
	}
	.za {
		overflow: auto;
		zoom: 1;
	}
</style>
<body>
<div class="box">
	<h2>这个没加overflow：auto和zoom：1属性，没有清除浮动，底下的li产生溢出重叠现象</h2>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
</div>
<div class="box za">
	<h2>这个加overflo:auto和zoom：1属性，清除浮动，正常</h2>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
	<div class="xx">子float</div>
</div>
</body>
</html>

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

猜你喜欢