根據(jù)CSS的盒模型概念，頁(yè)面中的每個(gè)元素，都是一個(gè)矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來(lái)控制。對(duì)于行為，我的意思是當(dāng)盒子內(nèi)外的內(nèi)容改變的時(shí)候，它如何處理。比如，如果你沒(méi)有設(shè)置一個(gè)盒子的高度，該盒子的高度將會(huì)根據(jù)它容納內(nèi)容的需要而增長(zhǎng)。但是當(dāng)你給一個(gè)盒子指定了一個(gè)高度或?qū)挾榷锩娴膬?nèi)容超出的時(shí)候會(huì)發(fā)生什么？這就是該添加CSS的overflow屬性的時(shí)候了，它允許你設(shè)定該種情況下如何處理。

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

讓我們分別看一下這幾個(gè)值，并討論一寫共同用法和技巧。

Visible

如果你不設(shè)置overflow屬性，則默認(rèn)的overflow屬性值就是visible。所以一般而言，并沒(méi)有什么理由特別的設(shè)定overflow的屬性為visible除非你想覆蓋它在其它地方被設(shè)定的值。

這里需要記住的重要的事情是，盡管盒子外面的內(nèi)容是可見(jiàn)的，內(nèi)容并不會(huì)影響頁(yè)面的工作流。比如：

一般來(lái)說(shuō)，你至少不用為里面的內(nèi)容為文字的盒子設(shè)置固定的高度，這樣就不會(huì)遇到這種情況了。

Hidden

默認(rèn)值visible的相反的值就是hidden。它會(huì)將所有超出盒子的所有內(nèi)容都給隱藏掉。

這對(duì)應(yīng)付使用動(dòng)態(tài)的內(nèi)容，而且可能會(huì)由于內(nèi)容溢出而引起一些布局上的問(wèn)題的確很有用。盡管如此，請(qǐng)記住用此方法隱藏的內(nèi)容將徹底的看不到(除非去查看源代碼)。 比如有的用戶設(shè)置他們的瀏覽器的默認(rèn)字體比你預(yù)期的要大些，你會(huì)將一些文字推到盒子的外面然后完全的隱藏之……

Scroll

設(shè)置一個(gè)盒子的overflow值為scroll將會(huì)隱藏掉渲染到盒子之外的內(nèi)容，但是它將會(huì)提供一個(gè)滾動(dòng)條在盒子內(nèi)部滾動(dòng)，從而可以查看剩下的內(nèi)容。

值得注意的是，使用scroll將會(huì)同時(shí)產(chǎn)生水平和垂直兩個(gè)滾動(dòng)條，就算內(nèi)容只需要其中一個(gè)。

Auto

overflow的auto值很像scroll，它唯一解決的是在你不需要的時(shí)候也會(huì)出現(xiàn)滾動(dòng)條的問(wèn)題。

清除浮動(dòng)

設(shè)置overflow的一個(gè)更流行的用處是，說(shuō)也奇怪，清除浮動(dòng)。設(shè)置overflow并不會(huì)在該元素上清除浮動(dòng)，它將清除自己(self-clear)。意思就是，應(yīng)用了overflow(auto或hidden)的元素，將會(huì)擴(kuò)展到它需要的大小以包圍它里面的浮動(dòng)的子元素(而不是疊了起來(lái)(collapsing))，假設(shè)未定義高度。就像這樣：

對(duì)于此問(wèn)題，經(jīng)過(guò)測(cè)試，IE6會(huì)自動(dòng)擴(kuò)展父層元素的高度，而IE8和FF等瀏覽器加上overflow:auto后，即可清除浮動(dòng)。――神飛

這里有更多關(guān)于浮動(dòng)的細(xì)節(jié)文章關(guān)于浮動(dòng)的一切。

跨瀏覽器的煩惱

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

滾動(dòng)條在盒子里面還是外面?

Firefox將其放到盒子外面，而IE則將其放到里面。我認(rèn)為只有IE是對(duì)的(它應(yīng)該在里面的)。

看清楚這個(gè)明顯的不同。

IE 8 擴(kuò)展盒子的bug

IE8有很多有趣的新bug，包括一些非常嚴(yán)重的隱藏在網(wǎng)頁(yè)中的。這里有更多的關(guān)于IE8的overflow的bug的介紹。

破壞浮動(dòng)布局

IE 6, 7 和 8都會(huì)扭曲默認(rèn)的overflow visible值并將水平的擴(kuò)展一個(gè)盒子一匹配內(nèi)容(比如圖片)。 這對(duì)使用浮動(dòng)列布局的結(jié)構(gòu)非常痛苦，而且單個(gè)擴(kuò)展的列就能夠?qū)⑵渌袛D下去并使布局亂掉！

事實(shí)上，這個(gè)我在驗(yàn)證的時(shí)候發(fā)現(xiàn)，只有IE6才會(huì)出現(xiàn)這種情況，而IE7、IE8和其它瀏覽器表現(xiàn)一致。如果大家在使用IE7或IE8時(shí)有遇到這種情況，請(qǐng)告訴我，多謝！――神飛

滾動(dòng)條能用CSS控制嗎？

IE過(guò)去在較老的版本中允許這樣，但是之后就收斂了。比如許多表單元素，滾動(dòng)條就不允許使用CSS控制。我在它是否是件好事情上沒(méi)有任何具體的意見(jiàn)，但是我可以說(shuō)，在網(wǎng)站的所有內(nèi)容上使用滾動(dòng)條是很丑陋的和俗氣的。如果你需要一個(gè)美化的滾動(dòng)條，你或許需要尋找JavaScript來(lái)模擬。

IE 技巧

無(wú)論是否需要，IE都會(huì)一直顯示一個(gè)垂直的滾動(dòng)條，這對(duì)預(yù)防水平跳動(dòng)是有些作用的，但并非總是可取的。要想在IE中移除它，可以在body元素中設(shè)置overflow為auto。PS:此種情況也較少發(fā)現(xiàn)，不過(guò)在body的樣式中添加overflow:auto的方法，建議考慮采用――神飛

演示

本文的演示頁(yè)面，可以查看這個(gè)頁(yè)面。