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]
- <!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清除浮动造成影响的作用不仅仅在于可以让浮动元素撑起父容器
替换其中的width:200px;为overflow:hidden;
一样可以让IE8 firefox chrome等浏览器表现的和IE6触发hasLayout一样,当然,这个不适用于IE6,所以如果要所有浏览器表现一致,zoom:1;和overflow:hidden要同时使用
但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C,我用zoom:1;做例子,是因为之前zoom:1被用的更广泛些,大家容易理解。