本質：均是兩側頂寬（寬度固定），中間自適應
適用：電商網頁pc移動端展示，比如淘寶、京東等電商網頁都有應用。
區別：只是中間自適應的處理方式不同。
聖盃佈局： 中間主要是直接撐滿，然後讓左右通過相對絕對定位（position）來浮動。
雙飛翼佈局：中間同樣充滿，在中間再放一層內部div,然後設定該內部div的margin和左右兩邊的margin即可。
圖解：
聖盃佈局如下：

如上圖所示.mid的div是直接撐滿，然後左右分別相對絕對定位。
雙飛翼佈局如下：

其.mid的div依舊是填滿的，左右直接margin來固定位置，但是.mid的內部就是margin的定位，如下圖所示：

<div class="bgbody">
    <!-- 廣告欄 -->
        <div class="shopadver"></div>
        <!-- 聖盃佈局 -->

        <div class="shopmid1">
            <div class="mid txt">中間</div>
            <div class
 
="left txt">左邊</div>
            <div class="right txt">右邊</div>
        </div>
        <div class="title">1.聖盃佈局</div>
        <!-- 雙飛翼佈局 -->

        <div class="shopmid2">
            <div class="mid">
                <div class="inner txt">
 
中間</div>
            </div>
            <div class="left txt">左邊</div>
            <div class="right txt">右邊</div>
        </div>
        <div class="title">2.雙飛翼佈局</div>
    </div>

Css:

html,body{
    margin :0;
    padding :0;
    width:100%;
    height:100%;
}
div{
    position:relative;
}
.title{
    height:60px;
    font-size:24px;
    color:#FF8C69;
    text-align:center;
    line-height:50px;
}
.txt{
    font-size:24px;
    color:#Fff;
    text-align:center;
    line-height:50px;
}
.bgbody{
    width:100%;
    height:100%;
}
.shopadver{
    width:96%;
    height:9%;
    border:1px solid blue;
    margin:0 auto;
}
.shopmid1{
    width:36%;
    height:10%;
    position:relative;
    border:1px solid red;
    margin:0 auto;
    padding:0 150px;
}
.shopmid1 .mid{
    width:100%;
    height:100%;
    background-color:#4682B4;
    float:left;
}
.shopmid1 .left{
    width:150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    margin-left:-100%;

    position:relative;
    left:-150px;
}
.shopmid1 .right{
    margin-left: -150px;
    width: 150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    position:relative;
    right:-150px;
}
.shopmid2{
    width:36%;
    height:10%;
    position:relative;
    border:1px solid red;
    margin:0 auto;
}
.shopmid2 .mid{
    width:100%;
    height:100%;
    background-color:#4682B4;
    float:left;
}
.shopmid2 .left{
    width:150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
    margin-left:-100%;
}
.shopmid2 .right{
    margin-left: -150px;
    width: 150px;
    height:100%;
    background-color:#9FB6CD;
    float:left;
}
.inner{
    margin:0 150px;
    height:100%;
}

有不當之處還望廣大讀者指正，喜歡這個文章的小夥伴麻煩關注下，後續還有更多的經典佈局介紹。