CSS Overflow 属性

神飞发表于 08. Aug, 2009, 分类: CSS, Tips , 13 条评论 »
标签：css & overflow & 浏览器

原文：CSS Overflow 属性
译自：The CSS Overflow Property
版权所有，转载请注明出处，多谢！！

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

让我们分别看一下这几个值，并讨论一写共同用法和技巧。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

Auto

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

清除浮动

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

对于此问题，经过测试，IE6会自动扩展父层元素的高度，而IE8和FF等浏览器加上overflow:auto后，即可清除浮动。——神飞

这里有更多关于浮动的细节文章关于浮动的一切。

跨浏览器的烦恼

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

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

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

看清楚这个明显的不同。

IE 8 扩展盒子的bug

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

破坏浮动布局

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

事实上，这个我在验证的时候发现，只有IE6才会出现这种情况，而IE7、IE8和其它浏览器表现一致。如果大家在使用IE7或IE8时有遇到这种情况，请告诉我，多谢！——神飞

滚动条能用CSS控制吗？

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

IE 技巧

无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。PS:此种情况也较少发现，不过在body的样式中添加overflow:auto的方法，建议考虑采用——神飞

演示

本文的演示页面，可以查看这个页面。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。

如果你喜欢本文，欢迎订阅本站以获得本站最新内容。

您或许也会喜欢：

13 个评论

喜欢发表于Aug 9, 2009 at 11:07

学习了，谢谢

回复
nic 发表于Aug 9, 2009 at 17:40

讲解的非常不错

回复
jacky 发表于Nov 27, 2009 at 16:25

thank you

回复
creak 发表于Apr 7, 2010 at 15:15

思路相当清晰

回复
Angela 发表于Apr 20, 2010 at 10:12

字写得真不错~

回复
ZhouQi 发表于Apr 29, 2010 at 21:58

ie7的visible在某些情况下有bug，比如子元素为inline元素，该元素有上下padding，这个时候子元素的背景并不会overflow到父元素的外面去
不过我也没弄清到底是“上下padding”的bug还是“overflow:visible“的bug，过两天做个demo再试试

回复
网友发表于Jun 24, 2010 at 02:36

之讲解了问题之所在，却没说如何解决问题。比如ie6的overflow:visible bug！

回复
- 海玉发表于Apr 18, 2011 at 15:16
  
  ie6的visible bug似乎是这么解决的，外层元素使用overflow:hidden，然后子元素使用position:relative，这样可以达到ie6下呈现overflow:visible;的效果。但是我纳闷的是OOCSS下的template.css为什么这么写.body{overflow:hidden; _overflow:visible; _zoom:1;} 这个_zoom:1还好理解ie6下让.body元素触发Haslayout，这个_overflow:visible是什么意思，ie6下overflow默认不是visible？帮忙解答下吧，神飞。
  
  回复
gylpm 发表于Sep 2, 2010 at 20:59

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

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

怎么改正Firefox的滚动条放置在盒子里面啊？

回复
锋华发表于Sep 25, 2010 at 15:25

『这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。』

这句话欠妥，在visible的情况下，只有ie7会这么干，ie6自动延展父元素，ie8和标准浏览器都将超出的内容在正常的文档流里面显示出来，不会重叠覆盖。

回复
- 锋华发表于Sep 25, 2010 at 15:28
  
  原来我说的也不全面，在子元素是float的情况下，如我所说；在子元素非float情况下，如你所说。
  
  回复
Tian 发表于Jul 24, 2012 at 14:12

geilivable

回复
foreverlone@foxmail.com 发表于Apr 12, 2013 at 11:48

学习饿了字体真不错可以发我邮箱一份吗谢谢了

回复