CSS Overflow的一些应用
做前端开发的使用非常频繁的一个属性就有Overflow一项，一个良好的CSS布局中也不可或缺的需要用到这个属性。下面就Overflow这一属性从几个方面进行一些细节讲解。
1、Overflow的默认属性：Visible.
如果你的元素没有特殊的要求的时候，就不要再为元素指定一个这一的属性，因为默认值已经是Visible了，除非你想设置一个新的属性来覆盖它。
2、Overflow属性值：hidden的应用：
如果你的盒模型中使用的是动态输出的内容，为了不至于使得界面错乱，此时就必须要指定一个值，hidden，这样就不至于出现新的和元素内容与此部分重叠等问题了。
3、Overflow的属性值：Scroll的应用
设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。
值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。
4、Overflow的属性值：Auto的应用
overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。
5、使用Overflow清除容器自身浮动
设置overflow的一个更流行的用处是，说也奇怪，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：
6、Overflow跨浏览器兼容性问题
就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。
(1)滚动条在盒子里面还是外面?
firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。
(2)IE 8 扩展盒子的bug
IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。
(3)破坏浮动布局
IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！
(4)滚动条能用CSS控制吗？
在这一点上我们建议的方式就是使用js而不是CSS，使用CSS的结果就是用了一堆的hack，最后还是不能很好的达到预期效果。