zoom:1 和 overflow:hidden

之前发过一个博文 http://blog.csdn.net/hedong37518585/article/details/6644408#reply  对其中的overflow:hidden的作用比较迷惑

感谢qqshenyunzcz 对该日志的回复,让我对overflow:hidden的作用又有了新的认识

 

firefox chrome下的overflow:hidden 有时候的作用 相对于 IE 的zoom:1(也可以用height:1%代替,因为zoom:1毕竟不能通过W3C)

overflow:hidden通常理解下是裁剪超出内容的,实际用途它还有很多用处,比如可以防止当前区域面积被别的元素侵犯

比方一个元素A的所有子元素都是float浮动的,那么这个元素A是没有高度的,尽管他的子元素是有高度的。

那么这个元素A的兄弟元素B可能和他的子元素区块有重合的地方,相当于被其他元素侵犯了。

这时给A加上overflow:hidden,他就会有自己的高度,此高度的范围包含了所有子元素(取其子元素最高的那个高度)。

这时元素A就不会和别的元素区块发生重合被侵犯的现象。很多浮动元素的父元素加上overflow:hidden。都是这个目的,是为了给予高度,并不是真正的防止溢出。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>overflow:hidden的作用</title>
<style>
*{
	margin:0;
	padding:0;
	font-size:12px;
}
.a{
	width:220px;
	background:#333;
	overflow:hidden;/*删除这里就可以看到它的作用*/
}
.aa{
	background:#CCC;	
	float:left;
}
.bb{
	background:#666;	
	float:left;
	height:50px;
}
.c{
	width:200px;
	height:100px;
	background:#ff0000;
}
</style>
</head>

<body>
<div class="a">
	<div class="aa">浮动元素</div>
	<div class="aa">浮动元素</div>
	<div class="aa">浮动元素</div>
	<div class="bb">浮动元素</div>
</div>
<div class="c">
</div>
</body>
</html>


 

overflow:hidden清除浮动造成影响的作用不仅仅在于可以让浮动元素撑起父容器

还可以用于下面这个文章的例子

http://blog.csdn.net/hedong37518585/article/details/6645884

替换其中的width:200px;为overflow:hidden;

一样可以让IE8 firefox chrome等浏览器表现的和IE6触发hasLayout一样,当然,这个不适用于IE6,所以如果要所有浏览器表现一致,zoom:1;和overflow:hidden要同时使用

 

但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C,我用zoom:1;做例子,是因为之前zoom:1被用的更广泛些,大家容易理解。

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值