overflow属性可以设置的值有5种：
（1）visible 默认值，内容不会裁剪，呈现在元素框之外；
（2）hidden 内容会被裁剪，并且子元素内容是不可见的；
（3）scroll 内容会被裁剪，但溢出的内容可以拖动浏览器自带的滚动条，查看内容；
（4）auto 如果内容被裁剪，那么溢出的内容也是拖动移动浏览器自带的滚动条，查看内容；
（5）inherit 继承父元素的overflow属性的值。
在实际运用中，除了hidden的应用比较多而灵活，其他几个还是很好理解和运用的。所以，这里着重归纳了hidden的用法。
（1）清除浮动
<div class="wrap"> <p>test of css</p> </div>
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
（2）阻止边距外折叠
<div class="wrap"> <p>test of css</p> </div>
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
（3）在IE-6，解决定义1px高的块元素
<div class="line"></div>
.line {height: 1px;overflow: hidden;}
（4）创建两栏布局
<div class="left"></div> <div class="right"></div>
div {height: 500px;}
.left {float: left;background-color: #000; 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
以上这4种还是比较常用的。但是在做项目的时候，发现了一个问题：父元素是必须overflow:hidden的，大多数情况下，其子元素是内容超出会被截掉,如图：
显然，这是一个bug。其解决方案：
将需要overflow:hidden和父元素的高度保持一致，不可以出现padding/margin边距值。
此外，有2种情况设置overflow:hidden时，内容是不会被裁剪：
1.有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;
2.内部溢出的元素是通过position:absolute绝对定位