双飞翼和圣杯布局属于老生常谈了，最近重新回顾了一下，写下来当作记录供以后参考，同时也是加深自己的理解。如果有不对的地方，希望大家多多指教。

双飞翼布局

.center 放前面是因为要提前渲染这一块儿的内容

    <header>head</header>
    <section class="clear">
      <div class="center">
        <div class="content"></div>
      </div>
      <div class="first"></div>
      <div class="second"></div>
    </section>
    <footer>footer</footer>

      section {
        min-width: 800px;
      }
      .center,
      .first,
      .second {
        float: left;
        height: 50vh;
      }
      .center {
        width: 100%;
        background: lightblue;
      }
      .center .content {
        margin: 0 100px;
      }
      .first {
        width: 100px;
        margin-left: -100%;
        background: lightcoral;
      }
      .second {
        width: 100px;
        background: lightgoldenrodyellow;
        margin-left: -100px;
      }

我们都知道div属于块级元素，独占一行。想要三个元素都在一行显示，设置浮动让其脱离文档流。center左右留出宽度放置左右元素，因为已经设置100%宽度所以左右两个元素被挤到下一行。first设置marginLeft:100%意味着向左移动整个屏幕的距离，正好放置到左侧事先预留出的100px宽度内。second marginRight:100px向左移动100px即本身的宽度，放置到右侧预留出的地方，这样就可以实现左右固宽中间自适应的三栏布局

圣杯布局

<header>head</header>
<!-- 圣杯 -->
    <main class="clear">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </main>
    <footer>footer</footer>

    main {
        min-width: 600px;
        padding: 0 100px;
    }
    .left,
    .middle,
    .right {
        float: left;
        height: 40vh;
    }
    .middle {
        background: orange;
        width: 100%;
    }
    .left {
        background: purple;
        width: 100px;
        margin-left: -100%;
        position: relative;
        left: -100px;
    }
    .right {
        position: relative;
        background: #000;
        width: 100px;
        margin-left: -100px;
        left: 100px;
    }

和双飞翼布局不同的地方在于外层设置padding:100px，middle的宽度只有100vw - 200px，和双飞翼相同的地方在于也是利用负margin来让left和right移动到和middle同一行。不同的地方是还需要设置相对定位，利用定位的left属性main元素的padding部分，达到左右固宽中间自适应的三栏布局。

flex布局

flex布局其实也可以实现，即左右宽度固定，中间元素flex:1占满剩余宽度，这里也就不贴出代码了。