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