如何实现双飞翼（圣杯）布局？

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局.

圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

1.三列布局，中间宽度自适应，两边宽度固定；

2.中间栏要在浏览器中优先展示渲染；

3.允许任意列的高度最高；圣杯布局和双飞翼布局要求一样

圣杯布局和双飞翼布局在大体相同下也存在一点不同，区别在于双飞翼布局中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡`。

不同之处

圣杯布局：父节点声明padding为左右列留出空位，将左右列固定在空位上
双飞翼布局：中间列插入子节点并声明margin为左右列让出空位，将左右列固定在空位上

圣杯布局

圣杯.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .clearfix::before,
      .clearfix::after {
        display: table;
        content: "";
        clear: both;
      }
      .container {
        padding: 0 200px;
      }
      .header,
      .footer {
        height: 200px;
        font-size: 28px;
        background-color: skyblue;
      }
      .left {
        position: relative;
        /* 2.将左边盒子再次移到最左边，否则.main的左侧会有200px的空白 */
        left: -200px;
        float: left;
        width: 200px;
        min-height: 300px;
        /* 1.将左边盒子拉到最左边 原来左边盒子是掉下去的 */
        margin-left: -100%;
        background-color: pink;
      }
      .main {
        float: left;
        width: 100%;
        min-height: 300px;
        /* 左右2个盒子各占了200px，因此需要将其抵消掉 */
        padding: 0 200px;
        background-color: #ccc;
      }
      .right {
          position: relative;
          right: -200px;
          float: left;
          width: 200px;
          /* 2.将右边盒子拉到最右边 原来右边盒子是掉下去的 */
            margin-left: -200px;
            min-height: 300px;
            background-color: tomato;
            
      }
    </style>
  </head>
  <body>
    <div class="header">header</div>
    <div class="container clearfix">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </body>
</html>

双飞翼布局

双飞翼.png

要点：给content内层嵌套一个div，然后给这个div设置margin值，这样使得，content区域还是占着整个父元素的100%宽度，但是内容区里面的div有设置margin左右，实现居中效果

    <style>
        .box{
            border:1px solid red;
            color:#fff;
        }
        .box .left, .right, .content{
            float: left;
            position: relative;
            text-align: center;
            line-height:50px;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .content{
            width:100%;
            height:300px;
            background: pink;
        }
        .content div{
            margin:0 300px 0 200px;
            height:100px;
            background: #000;
        }
        .left{
            width:200px;
            background: purple;
            height:200px;
            margin-left:-100%;
        }
        .right{
            width:300px;
            background: orange;
            margin-left:-300px;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="content">
            <div>content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

总结

双飞翼（圣杯）布局有很多种方法实现这里只是列出2种方法如有错误请各位大佬指正。