zoom:1 和 overflow:hidden

最新推荐文章于 2024-08-21 21:38:08 发布

转载最新推荐文章于 2024-08-21 21:38:08 发布 · 701 阅读

文章标签：

#css

前端专栏收录该内容

50 篇文章

订阅专栏

本文解释了overflow:hidden在处理浮动元素对父容器的影响时的作用，包括如何防止其他元素侵犯父元素的空间，以及如何替代width属性以实现类似IE6的行为。通过示例代码展示其应用。

原文：http://blog.youkuaiyun.com/hedong37518585/article/details/6645028

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。都是这个目的，是为了给予高度，并不是真正的防止溢出。

[html]view plaincopyprint? 
   
 <!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>  