聖杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄布局。
聖杯布局來源於文章In Search of the Holy Grail，而雙飛翼布局來源於淘寶UED。雖然兩者的實現方法略有差異，不過都遵循了以下要點：
- 兩側寬度固定，中間寬度自適應
- 中間部分在DOM結構上優先，以便先行渲染
- 允許三列中的任意一列成為最高列
- 只需要使用一個額外的
<div>標簽
下面我將依次介紹聖杯布局和雙飛翼布局的實現方法，並在最后根據個人思考對原有方法做出一些修改，給出其它一些可行的方案。
聖杯布局
1. DOM結構
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> 首先定義出整個布局的DOM結構，主體部分是由container包裹的center,left,right三列，其中center定義在最前面。
2. CSS代碼
假設左側的固定寬度為200px，右側的固定寬度為150px，則首先在container上設置：
#container { padding-left: 200px; padding-right: 150px; } 為左右兩列預留出相應的空間，得到如下示意圖：
隨后分別為三列設置寬度與浮動，同時對footer設置清除浮動：
#container .column { float: left; } #center { width: 100%; } #left { width: 200px; } #right { width: 150px; } #footer { clear: both; } 得到如下效果：
根據浮動的特性，由於center的寬度為100%，即占據了第一行的所有空間，所以left和right被“擠”到了第二行。
接下來的工作是將left放置到之前預留出的位置上，這里使用負外邊距（nagetive margin）：
#left { width: 200px; margin-left: -100%; } 得到：
隨后還需要使用定位(position)方法：
#left { width: 200px; margin-left: -100%; position: relative; right: 200px; } 這里使用position: relative和right: 200px將left的位置在原有位置基礎上左移200px，以完成left的放置：
接下來放置right，只需添加一條聲明即可：
#right { width: 150px; margin-right: -150px; } 得到最終的效果圖：
至此，布局效果完成。不過還需要考慮最后一步，那就是頁面的最小寬度：要想保證該布局效果正常顯示，由於兩側都具有固定的寬度，所以需要給定頁面一個最小的寬度，但這並不只是簡單的200+150=350px。回想之前left使用了position: relative，所以就意味着在center開始的區域，還存在着一個left的寬度。所以頁面的最小寬度應該設置為200+150+200=550px：
body { min-width: 550px; } 綜上所述，聖杯布局的CSS代碼為：
body { min-width: 550px; } #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { width: 100%; } #left { width: 200px; margin-left: -100%; position: relative; right: 200px; } #right { width: 150px; margin-right: -150px; } #footer { clear: both; } 關於聖杯布局的示例，可參考：聖杯布局
最后提醒一下很多朋友可能會忽略的小細節：在#center中，包含了一條聲明width: 100%，這是中間欄能夠做到自適應的關鍵。可能會有朋友認為不需要設置這條聲明，因為覺得center在不設置寬度的情況下會默認將寬度設置為父元素(container)的100%寬度。但需要注意到，center是浮動元素，由於浮動具有包裹性，在不顯式設置寬度的情況下會自動“收縮”到內容的尺寸大小。如果去掉width: 100%，則當中間欄不包含或者包含較少內容時，整個布局會“崩掉”，而達不到這樣的效果：
雙飛翼布局
1. DOM結構
<body> <div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> <body> 雙飛翼布局的DOM結構與聖杯布局的區別是用container僅包裹住center，另外將.column類從center移至container上。
2. CSS代碼
按照與聖杯布局相同的思路，首先設置各列的寬度與浮動，並且為左右兩列預留出空間，以及為footer設置浮動清除：
#container { width: 100%; } .column { float: left; } #center { margin-left: 200px; margin-right: 150px; } #left { width: 200px; } #right { width: 150px; } #footer { clear: both; } 得到如下效果示意圖：
以上代碼將container,left,right設置為float: left，而在container內部，center由於沒有設置浮動，所以其寬度默認為container的100%寬度，通過對其設置margin-left和margin-right為左右兩列預留出了空間。
將left放置到預留位置：
#left { width: 200px; margin-left: -100%; } 得到：
將right放置到預留位置：
#right { width: 150px; margin-left: -150px; } 得到最終效果：
最后計算最小頁面寬度：由於雙飛翼布局沒有用到position:relative進行定位，所以最小頁面寬度應該為200+150=350px。但是當頁面寬度縮小到350px附近時，會擠占中間欄的寬度，使得其內容被右側欄覆蓋，如下所示：
因此在設置最小頁面寬度時，應該適當增加一些寬度以供中間欄使用（假設為150px），則有：
body { min-width: 500px; } 至此雙飛翼布局大功告成！其布局整體代碼為：
body { min-width: 500px; } #container { width: 100%; } .column { float: left; } #center { margin-left: 200px; margin-right: 150px; } #left { width: 200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; } #footer { clear: both; } 關於雙飛翼布局的示例，可參考：雙飛翼布局
總結與思考
通過對聖杯布局和雙飛翼布局的介紹可以看出，聖杯布局在DOM結構上顯得更加直觀和自然，且在日常開發過程中，更容易形成這樣的DOM結構（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而雙飛翼布局在實現上由於不需要使用定位，所以更加簡潔，且允許的頁面最小寬度通常比聖杯布局更小。
其實通過思考不難發現，兩者在代碼實現上都額外引入了一個<div>標簽，其目的都是為了既能保證中間欄產生浮動（浮動后還必須顯式設置寬度），又能限制自身寬度為兩側欄留出空間。
從這個角度出發，如果去掉額外添加的<div>標簽，能否完成相同的布局呢？答案是肯定的，不過這需要在兼容性上做出犧牲：
DOM結構
<div id="header"></div> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> 去掉額外的<div>標簽后，得到的DOM結構如上所示，基於雙飛翼布局的實現思路，只需要在center上做出修改：
1. 使用calc()
.column { float: left; } #center { margin-left: 200px; margin-right: 150px; width: calc(100% - 350px); } 通過calc()可以十分方便地計算出center應該占據的自適應寬度，目前calc()支持到IE9。
2. 使用border-box
.column { float: left; } #center { padding-left: 200px; padding-right: 150px; box-sizing: border-box; width: 100%; } 使用border-box可以將center的整個盒模型寬度設置為父元素的100%寬度，此時再利用padding-left和padding-right可以自動得到中間欄的自適應寬度。不過需要注意的是，由於padding是盒子的一部分，所以padding部分會具有中間欄的背景色，當中間欄高於側欄時，會出現這樣的情況：
目前box-sizing支持到IE8。
3. 使用flex
這里使用flex還是需要與聖杯布局相同的DOM結構，不過在實現上將更加簡單：
<!-- DOM結構 --> <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> CSS代碼如下：
#container { display: flex; } #center { flex: 1; } #left { flex: 0 0 200px; order: -1; } #right { flex: 0 0 150px; } 結語
以上就是本人在學習聖杯布局和雙飛翼布局過程中的一些總結和認識，文章如有錯誤，歡迎大家多多指教~