三列布局 -- 圣杯+双飞翼在三列布局中，存在有两个特殊的布局方式：圣杯布局和双飞翼布局。这两种方式较普通的三列布局，是

首先三列布局是左、中、右三列，在常规的三列布局中，我们使用的HTML 结构就是从左到右。分别是 .left+.middle+.right。
但是我们知道，HTML的渲染执行顺序是从上到下执行的，所以 圣杯和双飞翼布局 将主体内容.middle 结构放到了前面，结构为：.middle+.left+right

圣杯布局

圣杯布局：三行三列布局 [header+main+footer]
核心内容：主要是实现中间部分 main的结构：左右固定，中间自适应

步骤：

设置基本的结构

<header class="header">header</header>
<div class="parent">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<footer class="footer">footer</footer>

设置基本样式

*{
    margin: 0;
    padding: 0;
}
.parent {}

.left,
.middle,
.right {
    height: 300px;
}
.left {
    width: 300px;
    background-color: red;
}
.middle {
    width: 100%;
    background-color: blueviolet;
}
.right {
    width: 300px;
    background-color: yellow;
}
.header,
.footer {
    height: 100px;
    background-color: darkgray;
}

构建中间布局

第一步：首先让三个容器进行横向排列[float:left] ；
第二步：在父元素上，给left&right 预留足够展示的空间；
第三步：设置left 处于留白区域
第四步：设置right 处于右侧留白区域

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        overflow: auto;

        /* 第二步：给left&right 预留足够展示的空间，如果让和中间也存在留白，那么可以多设置一些留白 */
        padding: 0 310px;
    }

    .left,
    .middle,
    .right {
        height: 300px;

        /* 第一步： 首先让三个容器进行横向排列[float:left] 
        显示结果依然left&right在下面
        [因为middle独占100%，没有另外两个足够的空间，所以掉下去了，并不是非横向排列]*/
        float: left;
    }
    .left {
        width: 300px;
        background-color: red;

        /* 第三步：让left 先到首部，所以需要向前移动，移动的位置是middle的宽度[100%],这时候处于最前面了，但是在middle上压着 */
        margin-left: -100%;

        /* 让left去往留白区域，使用定位进行计算。移动多少呢，就是父元素上设置给的多少像素 */
        position: relative;
        left: -310px;
    }
    .middle {
        width: 100%;
        background-color: blueviolet;
    }
    .right {
        width: 300px;
        background-color: yellow;

        /* 第四步：让right处于middle的后面去，处于后面后，要进行移动，移动到右侧去。 */
        margin-left: -300px;
        position: relative;
        right: -310px;
    }
    .header,
    .footer {
        height: 100px;
        background-color: darkgray;
    }

</style>

<header class="header">header</header>
<div class="parent">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<footer class="footer">footer</footer>

双飞翼布局

依然是左中右结构，同样是让主体内容main处于前排位置，然后让left&right随后

构建步骤【这里只写main主体的部分】

第一步：让左中右横向排列

第二步：给中间模型的子元素设置外边距 [maring] 让其进行左右留白

第三步：让left通过marginLeft进行向前移动，移动到最前面 -100%

第四步：让right向右移动，移动的是子元素设置的外边距位置

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        overflow: auto;
    }

    .left,
    .middle,
    .right {
        height: 300px;

        /* 第一步： 首先让三个容器进行横向排列[float:left]  */
        float: left;
    }
    .left {
        width: 300px;
        background-color: red;

        /* 第三步：让left 先到首部，所以需要向前移动，移动的位置是middle的宽度[100%],这时候处于最前面了，但是在middle上压着 */
        margin-left: -100%;
    }
    .middle {
        width: 100%;
        background-color: blueviolet;
    }
    .inner {
        height: 100%;
        background-color: aqua;

        /* 第二步：给middle中的子元素设置外边距，让其给left&right进行留白 */
        margin: 0 310px;
    }
    .right {
        width: 300px;
        background-color: yellow;

        /* 第四步：让right处于middle的后面去，处于后面后，要进行移动，移动到右侧去。 */
        margin-left: -300px;
    }
    .header,
    .footer {
        height: 100px;
        background-color: darkgray;
    }

</style>

<body>
    <header class="header">header</header>
    <div class="parent">
        <div class="middle">
            <div class="inner">middle+inner</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer class="footer">footer</footer>
</body>

总结

圣杯和双飞翼布局，玩的都是三列布局
圣杯和双飞翼布局，结构都是让 MAIN 主体结构置于最前面，这样在HTML进行渲染时候方便优先渲染
就结构而言，双飞翼布局的自适应模型，内部增加了inner结构
圣杯采用的是总父元素 [parent] 设置内边距的方式，让其左右两侧留白，然后 left & right 两个模型通过设置 margin+ position 的方式，让其处于自身的位置
双飞翼布局，是在圣杯布局的基础上，做了优化，它去除了position。通过增加一个inner模型的方式，设置外边距，然后给left & right 设置margin的方式，直接移动到对应的位置。