聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在**中看到的經典的三欄式布局，即中間是主要內容main-content，然後是左邊側欄，一般是**的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是**和京東。

main main-son left right

上面就是雙飛翼布局的html**，結構非常清晰，分為main，left，right三個部分，main中有乙個子標籤main-son,用來顯示主要內容。

下邊來一步一步看

1.首先我們在頁面插入乙個div，classname=main，float = left ，寬度為100%

2.加入兩個新的div，類名分別為left，right，寬度我們這裡都取20%，高度和main相同，float = left，效果如下

那麼我們怎樣讓left和right去到第一行呢？

3.這裡我們讓left和right的margin-left屬性分別為-100%（main的寬度）和-20%（right的寬度），效果如下

4.這是我們在left和right的div中新增內容，是能夠正常顯示的，說明我們兩邊的側欄實現成功了，那麼main中的內容怎麼辦呢？

這裡我們在main中新增乙個子div，類名main-son，如果我們直接放過去，main-son的內容會被left和right覆蓋掉，於是就給main-son的左右外邊距分別為left和right的寬度。

也就是margin = 0px 20%；這樣就能夠保證main-son的內容不會被覆蓋掉。

以上就是雙飛翼布局的內容。是不是很簡單。

聖杯布局和雙飛翼布局的實現目的是相同的，所以他們的前3個步驟是一樣的，區別是雙飛翼布局在main當中加了乙個子div，而聖杯布局是利用父元素的內邊距實現。

main left right

我們從第4步開始，為了main中的內容不被遮擋，我們給父元素container新增左右內邊距，寬度分別是left和right的寬度，效果：

這時，瀏覽器兩側留出了空白區域，就是container的內邊距。

5.那麼現在，為了讓main中的內容完全暴露出來，我們只要將left和right向兩側移動就好了。

分別給left和right新增position：relative，讓他們相對於自己定位，然後，給左側欄新增屬性left：-（自身寬度），右側欄right：-（自身寬度），那麼兩個側欄就會分別向兩側移動，因為我們之前設定的父元素內邊距寬度就是側邊欄的寬度，所以特悶正好佔據了父元素的內邊距。

這樣，我們就實現了聖杯布局。

兩種布局的實現目的是一致的，思路也差不多，只是在最後解決側邊欄覆蓋主欄內容時有差異，雙飛翼布局是新增了乙個子div，而聖杯布局是利用了父元素的內邊距，乙個多了個便簽，乙個新增了幾個屬性，孰優孰劣還是在實際應用中去判斷吧。