推荐一个web开发技术博客，英文的 http://snook.ca/archives/
Overflow: hidden 的使用
引用:
overflow 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无
语法：
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
overflow:hidden清除浮动
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<div id=”outside”>
<div id=”inside”></div>
</div>
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#outside{ 500px; background:#000; height:500px;}
#inside { float:left; 600px; height:600px; background:red;}
可以看到，我给inside这个id加了一个浮动，我们常规的理解是，我们允许inside这个id的div的右边出现其他的内容，只要它的宽度不超过outside这个div和inside这个div的剩余值。如果div outside中还包含其他的div，我不允许它出现在inside的右侧，我们则用样式clear:both指定这个div，不允许它浮动在inside右侧。这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当inside这个div的宽度和高度都大于outside这个div的时候，outside并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是500。这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给outside这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给outside加上这个属性后，我们的inside的宽高自动的被隐藏掉了。另外，我们再做一个试验，将outside这个div的高度值删除后，我们发现，outside的高度自动的被inside这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当inside这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了outside这个div，也就是说，此时的inside的宽高是多少，对于已经脱离了的outside来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给outside这个div加上overflow:hidden这个属性的时候，其中的inside等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给outside这个div设置高度的时候，inside这个div的高度，就会撑开outside这个div，而在另一个方面，我们要注意到的是，当我们给outside这个div加上一个高度值，那么无论inside这个div的高度是多少，outside这个高度都是我们设定的值。而当inside的高度超过outside的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
为了说明清除浮动的必要性，下面给个具体的例子：
下面的页面，在IE各个版本下面显示会不一样，IE8和ff是一致的。但给outside加上overflow:hidden;则都显示一致了，这就是清除浮动的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#outside{500px;background:#000;height:500px; }
#inside{float:left;800px;height:800px;background:red;}
</style>
</head>
<body>
<div id="outside">
<div id="inside">11</div>
</div>
<div style="">11111222</div>
</body>
</html>