之前发过一个博文 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被用的更广泛些，大家容易理解。
6304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
