首页 > 代码库 > overflow应用场景

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

overflow应用场景