來看一個經(jīng)典的三欄布局：
從內(nèi)容出發(fā)（
漸進增強
的核心思想），一份合理的HTML結(jié)構(gòu)如下：
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="ft"></div>
</div>
main
是主要內(nèi)容，
sub
是輔助內(nèi)容，比如導航、相關(guān)文章等，
extra
是額外信息，比如廣告等，具體含義根據(jù)實際情況來定。書寫HTML文檔有個非常重要的原則是：
重要的內(nèi)容放前面
。這能讓文檔更富語義，能提高可訪問性，對SEO也更友善。
寫好上面的代碼后，我們來看看如何實現(xiàn)三欄布局
?
。（書寫HTML時，盡量以內(nèi)容為向?qū)В苊庖簧蟻砭涂紤]布局，這體現(xiàn)的是內(nèi)容與表現(xiàn)的分離，同時也是
漸進增強
思想在工作流程中的體現(xiàn)。）
Table布局
經(jīng)典得一塌糊涂的表格布局，在漸進增強面前落花流水——表格布局要求書寫HTML代碼時，首先考慮布局，而不是內(nèi)容。不啰嗦，直接槍斃。
Float布局
浮動布局滿天飛：
優(yōu)點是簡單，缺點呢？在
One True Layout
這篇文章中有詳細的探討。或者看我收集的一些
Float引發(fā)的Bugs
.
考慮到IE的龐大市場，目前只好將浮動布局關(guān)禁閉了。
絕對定位布局
絕對定位非常簡單，非常精準。但面對不可預料的高度時，絕對定位就死翹翹了。可以看看
這篇文章
，還有一個不錯的例子：
Flanking Menus
.
廢話不多說，也關(guān)禁閉。
負邊距布局
Ryan Brill在2004寫了一篇文章：
Creating Liquid Layouts with Negative Margins
. 文中的“發(fā)現(xiàn)”立刻讓布局世界迎來了“負來負去”的新時代。對于上面的三欄布局，需要先調(diào)整DOM結(jié)構(gòu)：
<div id="hd"></div>
<div id="bd">
<div class="content">
<div class="sub"></div>
<div class="main"></div>
</div>
<div class="extra"></div>
</div>
<div id="ft"></div>
最終的CSS實現(xiàn)請看
這里
。請仔細閱讀Ryan的原文，可以發(fā)現(xiàn)負邊距能解決兩欄布局中文檔結(jié)構(gòu)的問題（
main
可以放在
sub
前面）。但對于三欄布局，Ryan給出的解決方案需要添加額外的包裹層，對DOM結(jié)構(gòu)也依舊存在依賴關(guān)系。
這個方法的最大價值是：開啟了負邊距的神奇大門，讓布局的實現(xiàn)思路立刻活躍了起來。
圣杯布局
2006年，Matthew Levine開始尋找布局圣杯：
In Search of the Holy Grail
. 這是一篇讓人贊嘆振奮的文章。Matthew靈活運用容器的內(nèi)邊距、浮動元素的負邊距和相對定位，接近完美的實現(xiàn)了三欄布局。DOM結(jié)構(gòu)也很好，無需額外標簽。但是，我們來看看多達27頁的評論吧。圣杯布局最令人頭疼的是：
在IE6下，左欄經(jīng)常會神奇消失！！！
（比如將IE6的窗口高度拖小點）評論中還反饋在IE7下也存在不少問題（我測試后，發(fā)現(xiàn)在IE7正式版下沒問題，評論中的IE7可能是beta版）。另外在Chrome下表現(xiàn)也有點詭異，需要小小hack. 還有那繁瑣的
padding, margin, left, right
計算，時刻需要一顆清晰的大腦，喝點小酒就徹底暈了……
這里還有篇文章專門分析了圣杯布局在IE6下的Bug:?
Jump on hover in Ala’s Holy Grail layout
.（萬惡的IE6啊，浪費了我們多少寶貴的時間）
2008年11月4日補充：這里有一個
改進版的圣杯布局
，解決了所有問題，缺點是包裹層太多，唉。
總之：這是一個很美妙的布局，但在IE6尚未退出歷史舞臺的當今，圣杯布局可能并不是我們真正要找的圣杯。
偽絕對定位布局
聰明的同行們對完美布局的追求孜孜不倦。2008年我們迎來了奧運。Eric Sol 給奧運的獻禮是一個聰明的布局嘗試：
Faux Absolute Positioning
.
這個布局思路很簡單：先相對定位到最右邊，再用
margin-left
移過來。關(guān)于這個布局，曾經(jīng)引發(fā)了淘寶UED內(nèi)部的
熱烈討論
。若干月后，我和
明城
在不同的項目中采用了這一方法，結(jié)果發(fā)現(xiàn)在ie下，某些頁面會閃屏（頁面加載時能看見左移）。當時項目緊，沒細究，上周想重現(xiàn)卻怎么也重現(xiàn)不了（明城說頁面非常復雜的時候會閃屏，但具體原因沒找出來）。今天看原文的評論，有人指出在
IE6下，設置背景圖會導致這個布局徹底完蛋
。
仔細想來，這個布局最讓人擔心的是：為什么一開始要將所有
item
都
left: 100%
? 這個太邪惡了，讓人不放心。
“借尸還魂”的Table布局
乍一看，這個布局很雷人：
基于display:table的CSS布局
。作者作了解釋：在css里使用
table-cell
之類的聲明，僅是聲明渲染方式，并不影響HTML文檔中的語義。從這個角度講，這種布局方式的確不錯，而且很容易就可以做到等高，也不用考慮清除浮動等擾人的問題。
但是，又是IE成了絆腳石。在IE中，這個布局需要IE8才支持。不過，即便所有瀏覽器都支持了，我為什么老覺得有點“借尸還魂”的感覺？
更多
布局世界精彩紛呈，下面這些文章也非常有影響力：
小結(jié)
可以看出，有不少布局（比如圣杯布局、偽絕對定位布局、One True Layout等）都符合漸進增強的工作流程。圣杯布局和One True Layout里，都把
negative margin
發(fā)揮到了極致（讓我對浮動元素的負邊距有了徹底的了解）。偽絕對定位布局則讓人很不放心
left: 100%
，用來解決原文中的問題感覺不錯，但如果用來作為整個頁面的布局，則有點邪惡。
漸進增強式布局探討（上）