摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。

三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三欄的基本實現思路和經典方法，對其中涉及到的知識點進行梳理。

目的：實現一個左欄和右欄寬300px，中間欄寬度自適應的三欄布局

首先，常規思路，我們寫出3個div的HTML和CSS，分別是leftColumn(左欄)、middleColumn(中欄)和rightColumn(右欄)。

HTML：

    
    
左欄
    
中欄
    
右欄

CSS：

#leftDiv {
    height: 300px;  /*高度設為300像素，下同*/
    background-color: rgb(60,139,176);  /*設置背景顏色*/
}

#middleDiv {
    height: 300px;
    background-color: rgb(225,236,214);
}

#rightDiv {
    height: 300px;
    background-color: rgb(122,122,122);
}

此時，得到的網頁如下圖所示：

這是因為div的特性：默認寬度最大化(頁面的100%)，默認高度最小化(根據內容自適應)。

上面的CSS中，只指定欄高度height:300px，未指定寬度，所以每個div都以寬度width:100%填滿所在行。

注意：此時若嘗試指定每個div的寬度，例如給每個div的CSS添加語句:

width: 100px;

得到的頁面如下圖左圖，而非右圖。

這是因為div屬于塊級(block)元素，默認情況下，塊級元素總是會另起一行。

為了使塊級元素能位于同一行，最簡單的方法是使用float屬性。我們對每個div的CSS新增語句：

#leftDiv,#middleDiv,#rightDiv {
    float: left;  /*向左浮動*/
    height: 300px;  
}

使其向左浮動,得到的效果如下圖所示：

可以看到，對CSS設置float:left屬性后，三欄位于了同一行，寬度為其內容的適應寬度。此時，我們將左欄和右欄寬度設置為300px：

#leftDiv,#rightDiv {
    width: 300px;  /*設置寬度為300像素*/
    ... 
}
#middleDiv {
    ...
}

得到的效果如下圖所示：

此時，中欄的寬度仍為其內容的適應寬度，我們為middleDiv添加如下語句：

width: calc(100% - 600px);  /*設置middleDiv寬度*/

calc()的作用為動態計算長度值，允許各種單位混合運算，運算符前后需有空格。

于是我們得到了最終效果。左欄和右欄各300px寬，中欄根據瀏覽器窗口大小進行動態調整。但需要注意的是，當瀏覽器窗口寬度小于600px時，中欄的寬度將小于0。為此，我們可以為瀏覽其設置最小調整寬度，避免頁面混亂：

body {
    min-width: 700px;
}

至此，一個三欄布局就完成了。這種實現思路比較符合人的思維定勢，但也存在一定的缺陷：瀏覽器加載和渲染頁面遵循從上到下的原則，這種方法中，HTML的middleDiv(中欄)位列于leftDiv(左欄)之后，所以會在leftDiv之后加載，而middleDiv往往是頁面的核心，需要優先加載展示給用戶。

于是，我們思考將middleDiv放在HTML中的首位：

    
    
中欄
    
左欄
    
右欄

CSS中，我們仍然設置middleDiv(中欄)的寬度為100% - 600px：

#middleDiv {
    width: calc(100% - 600px);
    ...
}

此時的界面如圖所示：

可以看到，由于我們在HTML中將middleDiv(中欄)放在欄首位，所以瀏覽器窗口中，中欄顯示在最前面。這時，我們需要為leftDiv(左欄)騰出空間，可以使用margin-left或padding-left。

margin和padding分別為盒模型的外邊距和內邊距，此處使用兩者皆可，此處唯一的區別是padding會被底色填充而margin不會。因為background-color的填充區域為content+padding+border。
還有一點需要注意的是，padding值不能為負，對于需要取負值時，僅可使用margin。

為middleDiv(中欄)添加以下語句：

margin-left: 300px;

此時效果如下圖所示：

可以看到，由于增加了300px的外邊距，第一行的橫向空間被middleDiv(中欄)和leftDiv(左欄)填滿，rightDiv(右欄)被迫位列第二行。

此時，我們使用relative屬性對左欄和右欄進行處理：

#leftDiv {
    position: relative;  /*相對定位*/
    left: calc(300px - 100%);  /*左移*/
    ...
}

#rightDiv {
    position: relative;
    top: -300px;  /*上移*/
    left: calc(100% - 300px);  /*右移*/
    ...
}

至此，我們在保證middleDiv(中欄)先行加載渲染的條件下，完成了三欄布局。基本思路為通過相對定位實現。

CSS三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。圣杯布局因形似圣杯而得名，即中欄為杯身，左右兩欄為杯耳。雙飛翼布局則是圣杯布局的一種改進，去掉了relative屬性，并為主體部分增加了內容嵌套。

圣杯布局和雙飛翼布局都需要在HTML中為div增加一層“容器(container)”。這個容器的目的主要是為了利用padding對中欄進行調整。

  
    
  
        
中欄
        
左欄
        
右欄
    

首先，仍然設置float:left屬性使div浮動，使其位于一行。

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

然后，將middleDiv(中欄)的寬度width設為100%：

#middleDiv {
    width: 100%;
    ...
}

得到如下圖所示的布局：

此時，需要將leftDiv置于第一行左側:

margin-left: -100%;  /* 左側邊界前移100% */

這樣處理的結果是leftDiv(左欄)被置于第一行最左端，但會覆蓋middleDiv(中欄)的部分內容。我們需要將中欄的內容從被覆蓋的地方拉出來。一個簡便的方法是對父容器container使用margin：

#container {
    margin: 0 300px 0 300px;
}

此處使用padding:0 300px 0 300px; 效果相同。

此時，leftDiv(左欄)也會受父容器的影響向右移動300px，仍然覆蓋著middleDiv(中欄)的一部分，所以我們使用相對定位讓其向左移動：

#leftDiv {
    position: relative;
    left: -300px;
    ...
}

此時的布局如下圖所示：

對rightDiv(右欄)作類似處理：

#rightDiv {
    margin-left: -300px;  /*左側邊界前移300px*/
    position: relative;
    right: -300px;  /*右側邊界右移300px*/
    ...   
}

不要忘記為body設定最小寬度：

body {
    min-width: 800px;
}

至此完成。

可以看到，圣杯布局的實現思想是給div套上一個父容器，通過調整父容器的padding和div左右欄的相對定位來實現三欄布局。

雙飛翼布局，源于淘寶UED，是圣杯布局的一種改進，或者說是另一種三欄實現思路。其創新點在于額外為middleDiv(中欄)增加一個子div存放其內容。

  
    

        

            
中欄
        
        
左欄
        
右欄
    

仍然使用float屬性來對div進行浮動：

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

與圣杯類似，設置middleDiv(中欄)寬度為100%，且將leftDiv(左欄)拉到最左側，將rightDiv(右欄)作類似處理：

#middleDiv {
    width: 100%;
    ...
}

#leftDiv {
    margin-left: -100%;
}

#rightDiv {
    margin-left: -300px;
}

到這一步為止，雙飛翼布局方法和圣杯CSS方法并不不同。

此時，由于雙飛翼布局方法為middleDiv(中欄)多帶帶添加了一個div存放其內容，所以對于中欄的處理，可以使用該div的margin屬性：

#content {
    margin: 0 300px 0 300px;
}

此處使用padding:0 300px 0 300px; 效果相同。

同樣，不要忘記為body設定最小寬度：

body {
    min-width: 800px;
}

至此完成。

可見，圣杯布局方法與雙飛翼布局方法的區別在于圣杯布局采用相對位置屬性(position:relative)來調整左欄和右欄位置，并使用margin/padding屬性調整中欄。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建div的方式，通過margin/padding來實現布局。

本文探討了三欄布局的CSS基本實現方法，首先以基本思路對三欄布局進行實現，發現不足，進行調整。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。除本文所述布局方法外，還存在絕對定位法、table布局法、網格布局法，以及十分方便的flex布局法等多種方法，各有利弊。

本文僅探討了三欄布局的基本實現思路與方法，詳細的實現過程希望能夠幫助大家深入理解CSS。關于其他方法的討論將在以后實際應用時進行總結。