三欄布局一般指左右兩欄固定寬度，中間一欄自適應的布局方法，也是許多網站常用的布局方式。如下圖：

該示例在一個html文件中編寫，為方便起見，預先寫好一個通用的css，左右寬度都為100px；

1.浮動三欄

左右兩欄均為float，中間一欄寬度自適應，這里為了中間一欄的安全輸入空間，要為中間一欄加上左右margin。因為block元素自帶換行效果，所以main要放在左右元素的后面，而dom元素是按順序加載的，因此main不能在左右兩欄之間完成加載。

2.利用BFC

利用BFC不與float元素疊加的特點，讓中間一欄通過設置overflow屬性擁有BFC特性，實現了這個三欄布局。

該布局同樣不能讓main在左右兩欄之前加載。

后面介紹的四種三欄布局可以讓main在左右兩欄之前加載。

3.absolute實現三欄布局

使用absolute定位，只需將左右兩欄絕對定位到窗口兩邊，為main添加左右margin創建安全輸入區域即可。因為absolute是以第一個定位不是static的父元素定位的，為這個整體添加一個定位不是static的父元素，絕對定位不會與header，footer等重疊。并且main的dom位置在left和right的前面，可在左右兩欄之前完成加載

4.flex

flex為一種彈性布局方式，flex-direction默認為row，即按行排列；order可以指定在元素在一個flex盒子之中的排列順序；將main放在left和right前面，并為其設置order至left和right的中間，可以讓main優先加載，并且位置不變；flex-grow屬性為元素相對放大比率，默認為0，即不放大，設置為1時會自動擴展。

5.圣杯布局

首先，建立main，left，right之間的dom結構，將main的width設為100%，main,left和right均為向左浮動，此時的界面如圖：

然后利用負margin對元素碰撞的改變，讓下面的兩個元素上去。對left，要到最左邊，margin-left設為-100%，right要到右邊，margin-left設為負的自身寬度，現在界面如圖

到這里的步驟都與下面的雙飛翼布局一致。

雖然left和right都到了main兩邊，但main還沒有安全輸入區間，比如圣杯兩字被left蓋住了。

為這個整體的父元素box加padding，并用relative將left，right移至對應的位置。

即完成了圣杯布局，可完成main在left，right之前加載。

6.雙飛翼布局

雙飛翼的步驟基本同圣杯布局，不過在main里面嵌套了一個塊級元素，為那個塊級元素設置margin，在這個塊級元素之中輸入的內容不會被覆蓋，并在left，right之前載入

總結

以上是生活随笔為你收集整理的css三栏布局技巧,CSS-三栏布局的常用6种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。