这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
overflow属性有四个值:visible (默认), hidden, scroll, 和auto。
同样有两个overflow的姐妹属性overflow-y (只对y轴起作用)和overflow-x(只对x轴起作用),它们很少被采用。
Visible
默认值。内容不会被修剪,会呈现在元素框之外。
如果你不设置overflow属性,则默认的overflow属性值就是visible。
Hidden
内容会被修剪,并且其余内容是不可见的。
这对应付使用动态的内容,而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此,请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些,你会将一些文字推到盒子的外面然后完全的隐藏之……
Scroll
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容,但是它将会提供一个滚动条在盒子内部滚动,从而可以查看剩下的内容。
Auto
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
所在区域能显示下,就不出滚动条。当内容多时,显示不完全,滚动条自动出现。
overflow还可以清除浮动
设置overflow的一个更流行的用处是,清除浮动。设置overflow并不会在该元素上清除浮动,它将清除自己(self-clear)。意思就是,应用了overflow(auto或hidden)的元素,将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing)),假设未定义高度。
对于此问题,IE6会自动扩展父层元素的高度,而IE8和FF等浏览器加上overflow:auto后,即可清除浮动
滚动条在 Firefox将其放到盒子外面,而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。