|
如果你已經(jīng)理解了block formatting contexts那么請繼續(xù)，否則請先看看這篇文章。
Overflow能夠做一些很牛掰的事情，比如:
- 創(chuàng)建BFC (block formatting contexts via W3c css2.1)
- 清除浮動
生成塊級元素
overflow屬性一旦被指定，那么一個新的BFC就被創(chuàng)建了。這意味著什么呢？它改變了block和浮動元素的交互方式。它不再圍繞浮動元素，而是變成一個narrower。
[P沒有用overflow]你可以把一個頁面想象成大的集裝箱，這個集裝箱里裝的貨物就是HTML元素。在現(xiàn)實生活中為了避免 不同人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話無論你包裝里面的貨物怎么擺放，都不會影響到其他人的貨物。
[P有用overflow:hidden]你可以把一個頁面想象成大的集裝箱，這個集裝箱里裝的貨物就是HTML元素。在現(xiàn)實生活中為了避免 不同人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話無論你包裝里面的貨物怎么擺放，都不會影響到其他人的貨物。
這不是一個hack，在w3c標(biāo)準(zhǔn)中有明確的說明：
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
那么該如何學(xué)以致用呢？
擁有新FC( formatting context)的塊級元素會占去一行中所有的剩余空間，只給定位了的浮動元素留下空間。在原文作者的開源項目OOCSS中，有兩種方式去使用FC：
主內(nèi)容列 -添加FC意味著主內(nèi)容列將占去除左右列之外的所有空間。這意味著，在一個模板下，只需簡單的刪除多余的那列，不用做其它任何更改你就可以很輕易的將布局從三列變?yōu)閮闪�。CMS開發(fā)者會非常喜歡這個特性的。
在Firebug下玩玩這個模板。
- 試著將“l(fā)iquid”class增加到“page”元素中。
- 從HTML中添加或刪除一列。
- 用文檔中列出的附加class去擴(kuò)展一個列對象。
- 嘗試在Firebug中直接改變列的寬度。
網(wǎng)格 -任何開發(fā)過網(wǎng)格系統(tǒng)的人都知道sub-pixel舍入錯誤所帶來的痛苦。瀏覽器不知道如何處理33.3像素，所以他們都會做不同的事情。YUI利用“列”之間的“槽”解決了這一差異，但我們也可以在單元內(nèi)部隱藏這一差異。
一個新的BFC可以用來隱藏網(wǎng)格任何一列最后一個單元的尺寸誤差。試試這個網(wǎng)格，你會發(fā)現(xiàn)當(dāng)你修改單元的尺寸時，最后的單元會自動伸縮，以適應(yīng)差異。它沒有寬度，而且如果擁有新的BFC，它也不會環(huán)繞浮動元素。
清除浮動
你肯定聽說過清除浮動這碼事。人們一直在探討通過overflow的屬性來清除浮動 。有些人認(rèn)為它是hack，但仔細(xì)閱讀規(guī)范你會發(fā)現(xiàn)，規(guī)范作者也沒能明確它。因為它的最終解釋權(quán)歸瀏覽器廠商。為了計算出什么溢出了容器（這些范圍應(yīng)該被隱藏），他們需要知道塊的大小。由于這些塊都沒有給出明確的高度設(shè)置，于是瀏覽器就使用了從塊內(nèi)容中計算出的高度。欲了解更多關(guān)于清除的內(nèi)容 ，請看我和Eric Meyer在他博客里的討論。
注意事項
溢出可以太大內(nèi)容（如巨大的圖片，pre區(qū)域，或表格之類），我現(xiàn)在嘗試overflow: auto，到底使用哪個還需要權(quán)衡。
PS: 終于把這篇文章放出來了，其實已經(jīng)躺在我電腦里好久了，當(dāng)初答應(yīng)濤哥翻譯的 ，結(jié)果拖了這么久實在慚愧。水平所限，文中還有些地方譯的很牽強(qiáng)，或者不好理解，希望大家能幫忙指正。
原文地址：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
本文鏈接：http://www.95time.cn/tech/web/2011/8302.asp 
出處：css9.net
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
