【佈局】聖盃佈局&雙飛翼佈局

背景

隨着前端技術的發展推動，web端的佈局方式已基本成熟，那麼在網站佈局方式中，三列布局最爲經常使用，佈局方式也有不少，漸漸的開發者們開始從效率的角度優化本身的代碼
「若是三排佈局能將中間的模塊放在dom樹前面，那麼瀏覽器在作重繪的時候不久有限顯示了嗎？」
機制的開發者們開始圍繞者這個方向進行了dom的優化，因而誕生了兩種著名的佈局方式，聖盃佈局和雙飛翼佈局

直奔主題

兩種佈局的背景就不講了，直接上代碼

聖盃佈局

【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">main</div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

雙飛翼佈局

ps:
「這不是同樣的圖嘛？」
「對！就是同樣的，由於是解決同一種問題的嘛。」

【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

差異

通俗點講就是

聖盃佈局像是，杯子（wrapper）掛上兩隻「耳朵」（left，right），全部容量都給了杯身（main），耳朵只能掛在兩側。
雙飛翼佈局像是，鳥（wrapper）的雙翼（left，right），身子（main）是鳥的一大部分，雙翼也是身體的一部分。

雖然比較抽象，但有助於對兩種佈局的區分。實在看不懂就就代碼吧，本人「扯」的功力不太夠。

其餘佈局

其餘佈局方案已經整理到此文中，歡迎你們前往指正

【整理】CSS佈局方案