背景
隨著前端技術(shù)的發(fā)展推進崎坊，web端的布局方式已基本成熟备禀，那么在網(wǎng)站布局方式中，三列布局最為常用奈揍，布局方式也有很多曲尸，漸漸的開發(fā)者們開始從效率的角度優(yōu)化自己的代碼
“如果三排布局能將中間的模塊放在dom樹前面，那么瀏覽器在做重繪的時候不久有限顯示了嗎男翰？”
機制的開發(fā)者們開始圍繞者這個方向進行了dom的優(yōu)化另患，于是誕生了兩種著名的布局方式，圣杯布局和雙飛翼布局
直奔主題
兩種布局的背景就不講了蛾绎，直接上代碼
圣杯布局
【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;}
雙飛翼布局
【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）鹏倘，耳朵只能掛在兩側(cè)。
雙飛翼布局像是顽爹，鳥（wrapper）的雙翼（left纤泵，right），身子（main）是鳥的一大部分镜粤，雙翼也是身體的一部分捏题。
雖然比較抽象，但有助于對兩種布局的區(qū)分肉渴。實在看不懂就就代碼吧公荧，本人“扯”的功力不太夠。
