CSS Overflow屬性詳解

檢索或設定當對象的内容超過其指定高度及寬度時如何管理内容。

所有對象的預設值是 visible ，除了 textarea 對象和 body 對象的預設值是 auto 。設定 textarea 對象此屬性值為 hidden 将隐藏其滾動條。

overflow屬性有四個值：visible (預設), hidden, scroll, 和auto。同樣有兩個overflow的姐妹屬性overflow-y 和overflow-x，它們很少被采用。

如果你不設定overflow屬性，則預設的overflow屬性值就是visible。是以一般而言，并沒有什麼理由特别的設定overflow的屬性為visible除非你想覆寫它在其它地方被設定的值。

這裡需要記住的重要的事情是，盡管盒子外面的内容是可見的，内容并不會影響頁面的工作流。比如：

一般來說，你至少不用為裡面的内容為文字的盒子設定固定的高度，這樣就不會遇到這種情況了。

預設值visible的相反的值就是hidden。它會将所有超出盒子的所有内容都給隐藏掉。

這對應付使用動态的内容，而且可能會由于内容溢出而引起一些布局上的問題的确很有用。盡管如此，請記住用此方法隐藏的内容将徹底的看不到(除非去檢視源代碼)。 比如有的使用者設定他們的浏覽器的預設字型比你預期的要大些，你會将一些文字推到盒子的外面然後完全的隐藏之……

設定一個盒子的overflow值為scroll将會隐藏掉渲染到盒子之外的内容，但是它将會提供一個滾動條在盒子内部滾動，進而可以檢視剩下的内容。

值得注意的是，使用scroll将會同時産生水準和垂直兩個滾動條，就算内容隻需要其中一個。

overflow的auto值很像scroll，它唯一解決的是在你不需要的時候也會出現滾動條的問題。

設定overflow的一個更流行的用處是，說也奇怪，清除浮動。設定overflow并不會在該元素上清除浮動，它将清除自己(self-clear)。意思就是，應用了overflow(auto或hidden)的元素，将會擴充到它需要的大小以包圍它裡面的浮動的子元素(而不是疊了起來(collapsing))，假設未定義高度。就像這樣：

就像CSS中的很多東東，overflow有很多的跨浏覽器的蹊跷的事情。比如這些：

Firefox将其放到盒子外面，而IE則将其放到裡面。我認為隻有IE是對的(它應該在裡面的)。

看清楚這個明顯的不同。

IE 6, 7 和 8都會扭曲預設的overflow visible值并将水準的擴充一個盒子一比對内容(比如圖檔)。 這對使用浮動列布局的結構非常痛苦，而且單個擴充的列就能夠将其它列擠下去并使布局亂掉！

IE過去在較老的版本中允許這樣，但是之後就收斂了。比如許多表單元素，滾動條就不允許使用CSS控制。我在它是否是件好事情上沒有任何具體的意 見，但是我可以說，在網站的所有内容上使用滾動條是很醜陋的和俗氣的。如果你需要一個美化的滾動條，你或許需要尋找JavaScript來模拟。

本文轉自 風雨蕭條 51CTO部落格，原文連結：http://blog.51cto.com/1095221645/1811254，如需轉載請自行聯系原作者