作用：兩者均為三欄布局的優(yōu)化解決方案，并且外觀看上去一樣的效果塞淹。
為什么要是使用试吁？
常規(guī)情況下，我們的布局框架使用以下寫(xiě)法，從上到下膝昆，從左到右。大概整體頁(yè)面的架子如下所示
<header>header</header>
<section>
<aside>left</aside>
<section>main</section>
<aside>right</aside>
</section>
<footer>footer</footer>
我們希望中間 main 部分優(yōu)先顯示的話叠必，我們通過(guò)布局優(yōu)化的優(yōu)化荚孵，圣杯&雙飛翼是可以到達(dá)這樣的目的的。
因?yàn)闉g覽器渲染引擎在構(gòu)建和渲染渲染樹(shù)是異步的（誰(shuí)先構(gòu)建好誰(shuí)先顯示）纬朝，那么將<section>main</section> 部分提前即可優(yōu)先渲染处窥。
于是乎，國(guó)外的前輩就提出了「圣杯」布局玄组，目的就是通過(guò) css 的方式配合上面的 DOM 結(jié)構(gòu)滔驾，優(yōu)化 DOM 渲染。
圣杯布局
<style>
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.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;}
</style>
<template>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</template>
使用了 relative 相對(duì)定位俄讹、float（需要清除浮動(dòng)哆致，此處使用 overflow:hidden; 方法）和 負(fù)值 margin，將 left 和 right 部分「安裝」到 wrapper 的兩側(cè)患膛，顧名 「圣杯」摊阀。
但是圣杯又有一個(gè)問(wèn)題
將瀏覽器無(wú)限變窄，「圣杯」將會(huì)「破碎」掉踪蹬。當(dāng) main 部分的寬小于 left 部分時(shí)就會(huì)發(fā)生布局混亂胞此。
不過(guò)可以給瀏覽器增加一個(gè)最小寬度，不讓圣杯碎掉跃捣。PC端很多網(wǎng)站瀏覽器窗口小到一定程度的時(shí)候漱牵，底部會(huì)出現(xiàn)一個(gè)滾動(dòng)條。
于是疚漆，淘寶軟對(duì)針對(duì)「圣杯」的缺點(diǎn)做了優(yōu)化酣胀，并提出「雙飛翼」布局刁赦。
雙飛翼
<style>
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.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;}
</style>
<template>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</template>
同樣使用了 float 和 負(fù)值 margin,不同的是，并沒(méi)有使用 relative 相對(duì)定位 而是增加了 dom 結(jié)構(gòu)闻镶，增加了一個(gè)層級(jí)甚脉。確實(shí)解決了圣杯布局的缺陷。
作者：木羽不是木魚(yú)
來(lái)源：掘金 聊聊為什么淘寶要提出「雙飛翼」布局
