今天突然想起了溫習一下css布局。之前看雙飛翼布局只是粗略的看了一下，大概明白怎麽做，但是並沒有去延伸一下...還有它的孿生兄弟：聖杯布局。今天仔細的琢磨了一下；突然發現其實內容還不少的樣子。

雙飛翼布局或者說聖杯布局它們都是三列布局；（一列自適應和兩列固定列）。當然，除了三列布局，還有一列布局（自適應居中）、兩列布局(一列自適應一列固定列)。

其他兩種都相對來說簡單些。就著重說一下三列布局。

一、雙飛翼布局

先給出效果圖：

其中中間一部分是自適應寬度，其他兩列是固定列大小。

有兩種方式可以實現布局，這是第一種；另外一種方式其實和第一種沒有多大的差別。只是一個用的margin一個用的padding

body代碼：

style代碼部分

在這部分中，布局利用了margin-left為負值來完成；詳細的在代碼中說明

第二種實現方法類似第一種，不過做一點微調

body代碼：

在中間列的裏面加一個內部的div盒子，用它來裝內容。

style代碼部分：

前面的一模一樣。在.main那裏開始變化；最後給inner加一個樣式就ok。

二、聖杯布局

它和雙飛翼相似。但是實現的思想略有一點不同。

body部分：

style代碼部分：

第二種實現方法純屬我按照自己的想法來解釋和實現，是我自己的一個理解。實現的效果是相同的，是我自己在測試的時候，發現.container設置內邊距和設置外邊距的效果是相同的。但是就只改變padding為margin的話，效果如下圖

納裏。。什麽意思？兩邊的列呢？打開盒模型檢查的時候發現，兩邊的列是好好的呆在兩邊的啊。乍一看！原來是被隱藏掉了。我只改變了padding為margin。然後兩邊就被

隱藏掉了。找了半天。問題出現了在overflow：hidden的那裏，因為我這時候為container設置的是外邊距：即container和其他外圍盒子之間的距離。當給兩列設置偏移量時是補外邊距的空白。將兩列放在了外邊距中就會產生內容溢出的問題，這樣用overflow：hidden的話，就會隱藏溢出的內容；自然就看不見了固定的兩列。方法就是換一種方法來清除浮動。這裏我直接給footer元素加上clear:left;就清除了浮動就ok了。得到效果圖:

雙飛翼布局和聖杯布局解析