三欄佈局那些事兒

博客原文地址：Claiyre的我的博客 https://claiyre.github.io/
如需轉載，請在文章開頭註明原文地址
人無遠慮，必有近憂。

中間寬度自適應，兩邊寬度固定的三欄佈局，是前端頁面開發中極爲常見網站佈局方式。博主認爲，一名合格的前端工程師老是會將之熟記於心。
如下是博主總結的五種三欄佈局的經常使用方法，與你們分享。

正文

---

一、浮動佈局

浮動佈局是一種極易理解，也是初學者首先想到的佈局方式。僅借用CSS的float屬性便可輕鬆實現。
html代碼

<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>
<!-- 注意其前後順序，main必須在left和right後-->

CSS代碼

.left{
            background-color: #ffd0d0;
            width: 160px;
            height: 400px;
            float: left;
        }
.right{
            background-color: #a9ffa9;
            width: 160px;
            height: 400px;
            float: right;
        }
.main{
            background-color: #ffffa9;
            height: 500px;
            width: auto;
        }

注意html代碼中三欄的前後順序
浮動佈局的優勢是簡單，但也有很多缺點：

1. 主要內容main在文檔後側，因此直到最後才能渲染主要內容。
2. left和right實際上是浮動到了main上面，也就是說，當主欄高度大於側欄高度時（這種狀況極爲常見），main下面的部份內容會和頁面同寬。很少說，下面一張圖賽過千言萬語。

二、絕對定位佈局

僅兩個側欄使用絕對定位，脫離文檔流，始終在頁面的兩邊。而後，爲了不主欄和側欄內容重疊，給主欄設置外邊距，其數值等於側欄寬度。
html代碼

<div class="main">Main</div>
<div class="right">Right</div>
<div class="left">Left</div>

CSS代碼

.main{
            background-color: #ffffa9;
            height: 500px;
            width: auto;
            margin: 0 160px;
           /* min-width: 200px;  */

        }
.left{
            background-color:#ffd0d0;
            width:160px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }
.right{
            background-color: #a9ffa9;
            width: 160px;
            height: 400px;
            position: absolute;
            top: 0;
            right: 0;
        }

用絕對定位佈局思路簡單清晰，但有一個明顯的缺點，就是若是中間欄有最小寬度限制，當瀏覽器 縮小至必定程度時，會出現層疊現象。以下圖

三、聖盃佈局

最爲經典的聖盃佈局，其思路主要是借用浮動分別將左欄和右欄浮動至主欄的兩邊；而後用外層容器的內邊距將主欄兩邊「推」向中間必定寬度，給左欄和右欄騰出空間；最後藉助相對定位 將左欄和右欄定位至合適位置便可。
話很少說，先上代碼：
html代碼

<div class="container">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS代碼

.container{
        /*向中間「推」主欄，給兩個側欄 騰地兒*/                              
        padding: 0 160px;   
}
 .main{
            background-color: #ffffa9;                           
            width: 100%;        /*主欄寬度設置爲100%，自適應*/
            height: 500px;
            float: left;
        }
.left{
            background-color:#ffd0d0;
            width: 160px;
            height: 500px;
            position: relative;
            float: left;
            /*左側外邊距爲-100%，也就是主欄的寬度，使.left上浮，且左移至main的左邊*/
            margin-left:-100%;
            /*.left繼續左移，直到屏幕的最左邊，此時.left正好佔據.container左邊padding的160px*/
            left: -160px;
        }
.right{
            background-color: #a9ffa9;
            width: 160px;
            height: 400px;
            float: right;
            /*上移至容器最右邊*/
            margin-right: -160px;
            position: relative;
        }

注意，main（也就是主欄）在最前面，兩個側欄尾隨其後，固然左欄和右欄誰在前誰在後都是能夠的。這樣佈局的好處是：主欄在文檔的前面，因此重要的東西會優先渲染。

四、雙飛翼佈局

雙飛翼佈局是對聖盃佈局的優化，以增長一個div爲代價換取去掉了相對佈局。
「雙飛翼」，顧名思義，是在main外圍增長一個div（.main-outer），而後給.main-outer設置左右內邊距（或者給main設置外邊距，效果相同），像兩個翅膀。兩側欄上浮後恰好位於.main-outer的內邊距處，所以內邊距的值需等於側欄的寬度.
html代碼

<div class="container">
    <div class="main-outer">
        <div class="main">Main</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS代碼

.main-outer{
            box-sizing: border-box;
            padding: 0 160px;
            width: 100%;
            float: left;
        }
 .main{
            background-color: #ffffa9;
            height: 500px;
        }
 .left{
            background-color:#ffd0d0;
            width:160px;
            height: 400px;
            float: left;
            margin-left:-100%;
        }
.right{
            background-color: #a9ffa9;
            width: 160px;
            height: 400px;
            float: left;
            margin-left: -160px;
        }

主欄內容一樣在文檔的開頭部分，優先渲染。雙飛翼佈局不需使用相對定位，相對來講更易理解。

五、使用flex佈局

是時候拿出終極武器了，flex佈局。萬能的flex啊，賜我以能量吧！

html代碼

<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>

CSS代碼

.container{
            display: flex;
            
            /*如下是默認屬性，不寫也行，爲便於理解，博主在此將其羅列出來
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: flex-start;   */
        }
.main{
            background-color: #ffffa9;
            height: 500px;
            width:100%;  
        }
.left{
            background-color:#ffd0d0;
            width:160px;
            height: 400px;
        }
.right{
            background-color: #a9ffa9;
            width: 160px;
            height: 400px;
        }

上面代碼有一個缺陷，就是在html代碼中，left，main，right的相對位置不能改變，這就致使了main中的主要內容不能被優先渲染。那怎麼辦呢？(≧∀≦)ゞ

萬能的flex固然有辦法咯！
給.mian.left.right三個類中添加以下代碼：

.left{
    order: 1;
}
.main{
    order: 2;
}
.right{
    order: 3;
}

搞定！ *** 以上五種方法各有優缺點，根據實際狀況挑選適合項目的便可，大的項目的儘可能使用main內容可優先渲染的。