為了鞏固關於佈局的一些知識，對實現中間自適應，左右固定寬度的三列布局的方法進行了整理。

一、不考慮主體middle一定要放在最前面進行渲染

1、使用float+margin

 <div>
        <div class="left-01"><span>div-left</span></div>
        <div class="right-01"><span>div-right</span></div>
        <!--根據float對後面元素的影響，主元素要放在文件流最後-->
        <div class="middle-01"><span>div-middle</span></div>
    </div>
 

 /*float佈局,注意中間的middle不要設為width:100%,否則右邊的margin會被擠到視窗外面，div元素本身預設是佔滿整個父元素的寬度的，如果設了margin或者padding就會自動縮小width讓出margin和padding的空間*/
        .left-01 {
            float: left;
            background-color: red;
            width: 150px;
            height: 50px;
        }
        .right-01 {
            float: right;
            background-color: yellow;
            width: 200px;
            height: 50px;
        }
        .middle-01 {
            margin: 0 200px 0 150px;
            background-color: #fff9ca;
            height: 50px;
        } 
 

  <div>
        <div class="left-02"><span>div-left</span></div>
        <div class="right-02"><span>div-right</span></div>
        <!--主元素要放在文件流最後-->
        <div class="middle-02"><span>div-middle</span></div>
    </div>
 

 /* 使用BFC原理，將middle設為overflow: hidden; */
        .left-02 {
            float: left;
            background-color: red;
            width: 150px;
            height: 50px;
        }
        .right-02 {
            float: right;
            background-color: yellow;
            width: 200px;
            height: 50px;
        }
        .middle-02 {
            overflow: hidden;
            background-color: #fff9ca;
            height: 50px;
        }

二、主體middle一定要放在最前面進行渲染，使用聖盃/雙飛翼

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。

不同在於解決”中間欄div內容不被遮擋“問題的思路不一樣：
聖盃佈局，為了中間div內容不被遮擋，將中間div設定了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。

雙飛翼佈局，為了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（聖盃佈局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼佈局子div裡用margin-left和margin-right共2個屬性，6-2=4），個人感覺比聖盃佈局思路更直接和簡潔一點。

    <div>
        <!--主元素要放在文件流最前面-->
        <div class="middle-wrap">
            <div class="middle-03"><span>div-middle</span></div>
        </div>
        <div class="left-03"><span>div-left</span></div>
        <div class="right-03"><span>div-right</span></div>
    </div>

        /*雙飛翼佈局,為了中間div內容不被遮擋，直接在中間div內部建立子div設margin用於放置內容*/
        .middle-wrap {
            float: left;
            width: 100%;
            height: 50px;
            background-color: yellow;
        }
        .middle-wrap .middle-03 {
            height: 50px;
            margin: 0 100px; /*留出距離*/
            background-color: yellow;
        }
        .left-03 {
            float: left;
            width: 100px;
            margin-left: -100%;
            height: 50px;
            background-color: red;
        }
        .right-03{
            float: left;
            width: 100px;
            height:50px;
            margin-left: -100px;
            background-color: green;
        }

    <div class="cantainer">
        <!--主元素要放在文件流最前面-->
        <div class="middle-04"><span>div-middle</span></div>
        <div class="left-04"><span>div-left</span></div>
        <div class="right-04"><span>div-right</span></div>
    </div>

        /*聖盃佈局,為了中間div內容不被遮擋,給最外面包裹層加padding, 讓 padding-left 和 padding-right 的數值等於left 和 right 的寬度，然後利用相對定位把他們再移動在兩旁。 */
        .cantainer{
            padding:  0 100px;/* 留出左右的距離*/
            height: 100px;
        }
        .middle-04 {
            float: left;
            width: 100%;
            height: 50px;
            background-color: yellow;
           
        }
        .left-04 {
            float: left;
            width: 100px;
            margin-left: -100%;
            height: 50px;
            background-color: red;
            position: relative;
            left: -100px;/*往左拉*/
        }
        .right-04{
            float: left;
            width: 100px;
            height:50px;
            margin-left: -100px;
            background-color: green;
            position: relative;
            right: -100px;/*往右拉*/
        }