overflow:hidden 的几种作用【转】

功能1、隐藏溢出

在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。

例1：页面上有一个300*100的区域，放置滚动图片，父容器为边框，子容器是一张张的图片，那么此时，父容器起到遮罩的作用，除定义宽和高的值以外，还必须写overflow:hidden，这样就能把子容器的其它内容隐藏。

 

例2：网站的首页常常有这样的标题列表（如下图）

如果不事先告诉编辑这个区域是多少个字，程序又没有控制，那么CSS就可以用overflow:hidden的方法，仅仅显示一行。

 

2、消除浮动

如果一个容器中的子容器有浮动属性，外面的容器就要使用overflow:auto;清浮动，否则不会自适应扩展。

 

养成良好的清除浮动的习惯是必要的，不然有不少的 CSS BUG 问题是因为没有清除浮动造成的。我们多用<div class="clear"></div>的方法清除，而给层里写overflow:hidden;zoom:1 的方法也是可以清除浮动的，但有些人不提倡用，说有太多的限制性，比如当用户用键盘操作时，overflow会占用tab键位。