overflow应用场景

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;width: 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绝对定位