CSS属性之Overflow

    当页面有上下两个DIV层时，由于上面的DIV文字内容过多，超出该层的高度和宽度，此时上面的DIV层中的内容会覆盖到下面的DIV层之上。如下图：

    

此时该怎么解决呢？这就会用到CSS的一个很有用的属性—Overflow。该属性有四个值：

· visible（默认值）

· hidden

· scroll

· auto

 

Visible

    Overflow的Visible属性是默认值，也就是说，最初说到的那种情况就是Visible在起作用。这里需要注意的是，虽然第一层的溢出的内容会覆盖到第二层之上，但是并不会将第二层挤出原来的位置。如上图。

 

Hidden

    Hidden值与默认值相反，它会将所有超出DIV层范围的所有内容都给隐藏掉。如下图：

       

       该属性对显示动态内容、由于内容溢出而引起一些布局上的问题的确很有用。但是，要记住用此方法隐藏的内容将彻底的看不到。 比如：用户将他们的浏览器的默认字体调大，这将会使一些文字推到DIV层的外面被完全的隐藏。

 

Scroll

设置Overflow值为scroll将会在DIV层之内提供一个滚动条，从而可以查看到DIV层内所有的内容。如下图：

需要注意的是：使用Scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中的一个。而且如果该DIV层没有任何内容也会显示水平和垂直的禁用的滚动条。所以针对这种情况，Overflow又提供了Auto值。

 

Auto

       Overflow的auto值与scroll很像，它唯一不同的是在DIV层中的内容不需要滚动条的时候不会出现滚动条，与普通的DIV没有区别；如果内容超出范围就会显示滚动条。

 

Overflow的另一种用途：清除浮动

       Overflow另一个更为流行的用途是：清除浮动。假如现在有一个背景层，该层要包含两个子层，这两个子层都是浮动层（也就是说它们都设置了float属性）背景层只设置宽度，不设置高度，此时如果不设置背景层的Overflow属性，那么将不会显示背景层。

如果应用了Overflow(auto或hidden)的元素，将会清除子层的浮动，将两个子层包含到自己之内，就是说背景层将会扩展到它需要的大小以包围它里面的浮动的子元素。

代码如下：

<div id="layer1" style="width:500px; background-color:#99CC00; overflow:hidden;">

<div id="sonLayer1" style="width:100px; height:100px; float:left; background-color:#999999;">

           

</div>

<div id="sonLayer2" style="width:100px; height:100px; float:right; background-color:#6666FF;">

           

     </div>

</div>

 

利用Overflow属性制作不带滚动条的Textarea

所有对象的Overflow属性默认值都是visible，除了Textarea和body对象的默认值是auto。设置Textarea对象此属性值为hidden将隐藏其滚动条。

利用Overflow属性还可以去除无序列表li标签前面Type，如：实心圆点、空心方框等。设置li标签的Overflow属性为Hidden即可。