來看一個經典的三欄布局：
從內容出發（
漸進增強
的核心思想），一份合理的HTML結構如下：
<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
是主要內容，
sub
是輔助內容，比如導航、相關文章等，
extra
是額外信息，比如廣告等，具體含義根據實際情況來定。書寫HTML文檔有個非常重要的原則是：
重要的內容放前面
。這能讓文檔更富語義，能提高可訪問性，對SEO也更友善。
寫好上面的代碼后，我們來看看如何實現三欄布局
?
。（書寫HTML時，盡量以內容為向導，要避免一上來就考慮布局，這體現的是內容與表現的分離，同時也是
漸進增強
思想在工作流程中的體現。）
Table布局
經典得一塌糊涂的表格布局，在漸進增強面前落花流水——表格布局要求書寫HTML代碼時，首先考慮布局，而不是內容。不啰嗦，直接槍斃。
Float布局
浮動布局滿天飛：
優點是簡單，缺點呢？在
One True Layout
這篇文章中有詳細的探討。或者看我收集的一些
Float引發的Bugs
.
考慮到IE的龐大市場，目前只好將浮動布局關禁閉了。
絕對定位布局
絕對定位非常簡單，非常精準。但面對不可預料的高度時，絕對定位就死翹翹了。可以看看
這篇文章
，還有一個不錯的例子：
Flanking Menus
.
廢話不多說，也關禁閉。
負邊距布局
Ryan Brill在2004寫了一篇文章：
Creating Liquid Layouts with Negative Margins
. 文中的“發現”立刻讓布局世界迎來了“負來負去”的新時代。對于上面的三欄布局，需要先調整DOM結構：
<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實現請看
這里
。請仔細閱讀Ryan的原文，可以發現負邊距能解決兩欄布局中文檔結構的問題（
main
可以放在
sub
前面）。但對于三欄布局，Ryan給出的解決方案需要添加額外的包裹層，對DOM結構也依舊存在依賴關系。
這個方法的最大價值是：開啟了負邊距的神奇大門，讓布局的實現思路立刻活躍了起來。
圣杯布局
2006年，Matthew Levine開始尋找布局圣杯：
In Search of the Holy Grail
. 這是一篇讓人贊嘆振奮的文章。Matthew靈活運用容器的內邊距、浮動元素的負邊距和相對定位，接近完美的實現了三欄布局。DOM結構也很好，無需額外標簽。但是，我們來看看多達27頁的評論吧。圣杯布局最令人頭疼的是：
在IE6下，左欄經常會神奇消失！！！
（比如將IE6的窗口高度拖小點）評論中還反饋在IE7下也存在不少問題（我測試后，發現在IE7正式版下沒問題，評論中的IE7可能是beta版）。另外在Chrome下表現也有點詭異，需要小小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
移過來。關于這個布局，曾經引發了淘寶UED內部的
熱烈討論
。若干月后，我和
明城
在不同的項目中采用了這一方法，結果發現在ie下，某些頁面會閃屏（頁面加載時能看見左移）。當時項目緊，沒細究，上周想重現卻怎么也重現不了（明城說頁面非常復雜的時候會閃屏，但具體原因沒找出來）。今天看原文的評論，有人指出在
IE6下，設置背景圖會導致這個布局徹底完蛋
。
仔細想來，這個布局最讓人擔心的是：為什么一開始要將所有
item
都
left: 100%
? 這個太邪惡了，讓人不放心。
“借尸還魂”的Table布局
乍一看，這個布局很雷人：
基于display:table的CSS布局
。作者作了解釋：在css里使用
table-cell
之類的聲明，僅是聲明渲染方式，并不影響HTML文檔中的語義。從這個角度講，這種布局方式的確不錯，而且很容易就可以做到等高，也不用考慮清除浮動等擾人的問題。
但是，又是IE成了絆腳石。在IE中，這個布局需要IE8才支持。不過，即便所有瀏覽器都支持了，我為什么老覺得有點“借尸還魂”的感覺？
更多
布局世界精彩紛呈，下面這些文章也非常有影響力：
小結
可以看出，有不少布局（比如圣杯布局、偽絕對定位布局、One True Layout等）都符合漸進增強的工作流程。圣杯布局和One True Layout里，都把
negative margin
發揮到了極致（讓我對浮動元素的負邊距有了徹底的了解）。偽絕對定位布局則讓人很不放心
left: 100%
，用來解決原文中的問題感覺不錯，但如果用來作為整個頁面的布局，則有點邪惡。
漸進增強式布局探討（上）