CSS Overflow属性详解

Auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

清除浮动

设置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://paranimage.com/css-overflow-attribute/

第1页:CSS Overflow属性详解(1)   第2页:CSS Overflow属性详解(1)