1.設定基本樣式
為了高度保持一致給left main right都加上min-height:130px。
2.聖杯布局是一種相對布局，首先設定父元素container的位置：
實現效果是左右分別空出200px和300px區域，效果如圖：
3.將主體部分的三個子元素都設定左浮動
出現了如下情況，怎麼辦，別著急慢慢來：
4.設定main寬度為width:100%,讓其單獨佔滿一行
5.設定left和right負的外邊距
我們的目標是讓left、main、right依次併排，但是上圖中left和right都是位於下一行，這裡的技巧就是使用負的margin-left:
負的margin-left會讓元素沿文件流向左移動，如果負的數值比較大就會一直移動到上一行。關於負的margin的應用也是博大精深，這裡肯定是不能詳細介紹了。
設定left部分的margin-left為-100%,就會使left向左移動一整個行的寬度，由於left左邊是父元素的邊框，所以left繼續跳到上一行左移，一直移動到上一行的開頭，並覆蓋了main部分（仔細觀察下圖，你會發現main裡面的字「main」不見了，因為被left遮住了），left上移過後，right就會處於上一行的開頭位置，這時再設定right部分margin-left為負的寬度，right就會左移到上一行的末尾。
6.接下來只要把left和right分別移動到這兩個留白就可以了。可以使用相對定位移動 left和right部分。
至此，我們完成了三列中間自適應的布局，也就是傳說中的聖杯布局。完整的**如下：
聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。不同在於解決 「中間欄div內容不被遮擋」問題的思路不一樣。
他的html結構發生了變化：
直接貼出**，讀者可以自行參透他們的異同：
雙飛翼布局比聖杯布局多使用了1個div，少用大致4個css屬性（聖杯布局container的 padding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性，；而雙飛翼布局子div裡用margin-left和margin-right共2個屬性，比聖杯布局思路更直接和簡潔一點。簡單說起來就是：雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了。
聖杯布局和雙飛翼布局的作用和區別
css布局 – 聖杯布局 & 雙飛翼布局
flex 是 flexible box 的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為 flex 布局，所以flex 布局將成為未來布局的首選方案。
對於flex布局的一些具體語法實現，可參見阮一峰大神的flex 布局教程：語法篇；網友 jailbreak 為flex布局製作了 demo，可以參考。
那麼container下屬的main、left和right這三個子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱」專案」。
2.對這三個專案做初始設定
專案根據內容進行彈性布局：
3.通過order屬性設定排列順序
可以看出三個專案的排序方式不一樣了，main排在了第乙個，要讓main在中間，left在左邊，可以通過flex容器下的專案的屬性「order」屬性來設定：
對於order屬性：定義專案的排列順序，越小越靠前，預設為0。
４.通過專案屬性flex-grow設定main的放大比例，將空餘的空間用main來填充，使三個專案不滿一整行；預設為0，也就是對剩餘空間不做處理。
5.通過專案屬性flex-basis設定left和right的固定寬度
這樣就實現了我們的目標，是不是很簡單？這就是flex布局的魅力。。。
6.最後，完整的**如下：
絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
提示：因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定z-index 屬性來控制這些框的堆放次序。
言歸正傳：
絕對定位，就相當於萬金油一樣的存在，不論什麼樣的布局，使用絕對定位都能實現，所以對於具體的實現過程就不贅述，下面直接上**，不懂的call我：
實現結果當然是一樣的啦！
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局和雙飛翼布局
聖杯布局和雙飛翼布局都是為了實現兩邊固定，中間自適應的三列的布局，他的中間欄優先渲染。聖杯布局與雙飛翼布局前面幾步相同 1.寫三個div，中間的那個div放在第乙個 優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin left 100 右邊模組margin lef...