圣杯&双飞翼

github源码地址

作用：两者均为三栏布局的优化解决方案，并且外观看上去一样的效果。

为什么要是使用？

常规情况下，我们的布局框架使用以下写法，从上到下，从左到右。大概整体页面的架子如下所示

<header>header</header>
<section>
    <aside>left</aside>
    <section>main</section>
    <aside>right</aside>
</section>
<footer>footer</footer>

我们希望中间 main 部分优先显示的话，我们通过布局优化的优化，圣杯&双飞翼是可以到达这样的目的的。

因为浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），那么将<section>main</section> 部分提前即可优先渲染。

于是乎，国外的前辈就提出了「圣杯」布局，目的就是通过 css 的方式配合上面的 DOM 结构，优化 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 相对定位、float（需要清除浮动，此处使用 overflow:hidden; 方法）和 负值 margin，将 left 和 right 部分「安装」到 wrapper 的两侧，顾名 「圣杯」。

但是圣杯又有一个问题
将浏览器无限变窄，「圣杯」将会「破碎」掉。当 main 部分的宽小于 left 部分时就会发生布局混乱。
不过可以给浏览器增加一个最小宽度，不让圣杯碎掉。PC端很多网站浏览器窗口小到一定程度的时候，底部会出现一个滚动条。

于是，淘宝软对针对「圣杯」的缺点做了优化，并提出「双飞翼」布局。

双飞翼

<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 和 负值 margin,不同的是，并没有使用 relative 相对定位 而是增加了 dom 结构，增加了一个层级。确实解决了圣杯布局的缺陷。

作者：木羽不是木鱼
来源：掘金 聊聊为什么淘宝要提出「双飞翼」布局