今天突然想起了溫習一下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了。得到效果圖:
