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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有