最近正好碰到了寫這種布局，一直沒有總結過正好借這次機會總結一波，同時加強一下自己的理解。
聖杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同，都是兩邊兩欄寬度固定，中間欄寬度自適應。在html結構上中間欄在最前面保證了最先渲染中間提公升效能（因為這兩種布局都比較老，我認為在現代瀏覽器中這點兒效能優化效果並不是很大），並且相容性良好。兩種布局的實現方法前半部分相同，後半部分的實現各有利弊，下面會簡單介紹兩者的區別。
首先，既然是三欄式布局我們需要三個div
聖杯布局
main
left
right
footer
main設定width: 100%,讓它始終佔滿視窗，這樣才有自適應的效果。
然後我們給它加上點兒樣式區分，效果如下：
為了形成在一行三欄布局，給三個方塊都加上浮動float: left;（注意清除浮動，因為浮動會導致父元素高度塌陷）
接著我們要把三個方塊拉到一行，這裡要利用負margin的技巧。
下面我們來看一下效果：
看樣子好像我們已經成功達到了效果？不要急給兩個方塊變透明，再給中間加點兒內容看看。
我們發現當內容變多之後，因為三個方塊都是設定的浮動，脫離的文件流，兩邊固定寬度的兩欄會擋住我們的內容。
所以要想兩邊不遮擋內容，就需要中間欄給兩邊的位置騰出來。我們可以想到padding和margin都可以用來騰出位置，這兩個屬性就是聖杯布局的雙飛翼布局的區別，不過雙飛翼布局還需要稍微改造一下html的結構，這個等一下再說。
不過這樣布局有乙個問題就是：有乙個最小寬度，當頁面小於最小寬度時布局就會亂掉。所以最好給body設定乙個min-width。這個min-width肯定不能是試出來的，怎麼計算呢？就是left-width * 2 + right-width，至於為什麼，簡單的說就是：「由於設定了相對定位，所以當left原來的位置和right的位置產生重疊時，由於浮動的原因一行放不下就會換行」。所以布局就被打亂了。使用雙飛翼布局就可以避免這個問題。
首先我們要對html結構稍微改變一下：
雙飛翼布局
main
left
right
footer
main裡面又加了乙個內容層。如果知道盒子模型，就知道我們是不能直接給main新增margin屬性，因為我們已經設定了width：100%，再設定margin的話就會超過視窗的寬度，所以我們再創造乙個內容層，將所有要顯示的內容放到main-content中，給main-content設定margin就可以了。
聖杯布局是中間欄為兩邊騰開位置。
雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置
實現聖杯布局
聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...
聖杯布局 浮動實現
聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變，中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮...
聖杯布局的實現
經典三列布局，也叫聖杯布局 holy grail of layouts 在國內也叫雙飛翼布局。它的布局有幾點要求 1 三列布局，兩邊寬度固定，中間寬度自適應 2 中間欄要在瀏覽器中優先展示渲染 3 允許任意列的高度最高 4 要求只用乙個額外的div標籤 5 要求用最簡單的css 最少的hack語句。...