关于overflow属性

overflow用于设置当容器中的内容超过其指定高度及宽度时，如何显示超出的部分。

overflow属性有以下四个值：

visible (默认)：超出部分始终显示。

hidden：超出部分不显示。

scroll：始终显示水平和垂直滚动条。

auto：根据需要显示相应的滚动条。

另外有两个overflow的姐妹属性：overflow-y 和overflow-x，但很少使用。

除了 textarea 和 body 对象的overflow属性的默认值是 auto外，其它所有对象的overflow属性的默认值都是 visible。

Visible

如果不设置overflow属性，则默认值为visible。 

 注意：尽管box外面的内容是可见的，但他们并不会影响页面的布局，即不会占用其他组件的空间。

Hidden

hidden会将超出容器范围的所有内容都隐藏。

Scroll

scroll将隐藏超出容器指定范围之外的内容，但会提供滚动条（始终显示）在容器内部滚动。效果如下：

注意：scroll将同时产生水平和垂直两个滚动条，不管是否需要。

Auto

auto会根据需要才显示相应的滚动条值。效果如下：

清除浮动

设置overflow的一个更流行的用处是清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：

跨浏览器的烦恼

就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。比如这些：

滚动条在盒子里面还是外面?

firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。

看清楚这个明显的不同。

IE 8 扩展盒子的bug

IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。

破坏浮动布局

IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！

滚动条能用CSS控制吗？

IE过去在较老的版本中允许这样，但是之后就收敛了。比如许多表单元素，滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意 见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条，你或许需要寻找javascript来模拟。

IE 技巧

无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。

转载自：http://blog.163.com/hhu_bing/blog/static/346573922010112393218914/