双飞翼布局和圣杯布局都是三栏布局的实现方式，三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局）

圣杯布局

思路：主区域要优先加载，所以主区域放在左右区域的前面

开启浮动+ 清除浮动
- 开启浮动：三个区域均设置左浮动，主区域(width:100%)会占满父元素的宽度，因此左右区域会被挤到下一行
- 清除浮动：找到三个区域的父元素，使用伪元素清除浮动(否则会影响footer的布局)
主区域两侧留白 【padding】
- 找到三个区域的父元素，设置左右padding
两侧上去【负边距 + 相对定位】
- 左区域
  - 通过margin-left：-100%上去，这时候左区域会盖住主区域
  - 左区域还需要通过相对定位，向左移动到正确的位置
- 右区域：同理

初始样式：左右宽度固定，中间自适应，

<style>

    .left {
        /* 固定大小 */
        width: 100px;
        height: 100px;
    }


    .center {
        /* 自适应 */
        height: 100px;
        width: 100%;
   
    }

    .right {
        /* 固定大小 */
        width: 200px;
        height: 100px;
    
    }

    
</style>

<header style="background-color: green;" >圣杯布局 头部</header>
<main>
    <div class="center" style="background-color:red ;">主区域</div>
    <div class="left" style="background-color: yellow;">左区域</div>
    <div class="right" style="background-color: pink;">右区域</div>
</main>
<footer style="background-color: green;">底部</footer>

开启浮动,发现底部样式发生变化，需要清除浮动,如下图：

找到主区域、左区域、右区域的父元素，使用伪元素清除浮动,如下图：

浮动后，主区域占满父元素的宽度（主区域width：100%），因此左区域和右区域被挤下去了

找到主区域、左区域、右区域的父元素，通过设置左右的padding给两侧留白，如下图：

左区域上去：负边距 + 相对定位

通过负边距 margin-left：-100% 上去，如下图：

通过相对定位向左移动自身个位置(因为左区域遮盖住了主区域) position: relative + left: -100px 如下图：

右区域同理：负边距 + 相对定位

通过负边距 margin-left：-自身大小（-200px） 上去，如下图：

通过相对定位向右移动自身个位置(因为右区域遮盖住了主区域)，如下图

至此圣杯布局完成，完整代码如下：

<!DOCTYPE html>
<html>

<body>
    <style>
        .left {
            /* 固定大小 */
            width: 100px;
            height: 100px;

            /* 左浮动 */
            float: left;

            /* 左区域上去 */
            margin-left: -100%;
            position: relative;
            left: -100px;
        }


        .center {
            /* 自适应 */
            height: 100px;
            width: 100%;

            /* 左浮动 */
            float: left;


        }

        .right {
            /* 固定大小 */
            width: 200px;
            height: 100px;

            /* 左浮动 */
            float: left;

            /* 右区域上去 */
            margin-left: -200px;
            position: relative;
            left: 200px;
        }

        /* 伪元素清除浮动 */
        .clearfix::after {
            content: "";
            clear: both;
            display: block;
        }

        /* 两侧留白 */
        .wrapper {
            /* padding：上 右 下 左 */
            padding: 0px 200px 0px 100px;
        }
    </style>

    <header style="background-color: green;">圣杯布局 头部</header>
    <main class=" clearfix wrapper">
        <div class="center" style="background-color:red ;">主区域</div>
        <div class="left" style="background-color: yellow;">左区域</div>
        <div class="right" style="background-color: pink;">右区域</div>
    </main>
    <footer style="background-color: green;">底部</footer>
    
</body>

双飞翼布局

思路：主区域要优先加载，所以主区域放在左右区域的前面

与圣杯布局不同的是，使用了一个div包裹住主区域：为了方便主区域使用margin留出两侧空白

浮动 + 清除浮动
- 开启浮动：三个区域均设置左浮动，主区域会占满父元素的宽度，因此左右区域会被挤到下一行（这里与圣杯不同的是：浮动不直接左右在主区域上，而是作用在包裹它的那个div上）
- 清除浮动：找到三个区域的父元素，使用伪元素清除浮动
主区域两侧留白【margin】

给主区域设置左右margin

两侧上去【负边距】

左区域：通过margin-left：-100%上去
右区域：通过margin-left：负自身个位置上去

初始样式：左右宽度固定，中间自适应

<!DOCTYPE html>
<html>

<body>
    <style>
        .left {
            /* 固定大小 */
            width: 100px;
            height: 100px;
        }
        
        /* 包裹住主区域：为了方便主区域使用margin留出两侧空白 */
        .wrapper {
            height: 100px;
            width: 100%;
        }

        .center {
            height: 100px;
            /* 自适应 宽度默认为父元素 的宽度，即.wrapper设置的 width: 100% */ 
        }

        .right {
            /* 固定大小 */
            width: 200px;
            height: 100px;
        }

    </style>

    <header style="background-color: green;">双飞翼布局 头部</header>
    <main >
        <div class="wrapper">
            <div class="center" style="background-color:red ;">主区域</div>
        </div>

        <div class="left" style="background-color: yellow;">左区域</div>
        <div class="right" style="background-color: pink;">右区域</div>
    </main>
    <footer style="background-color: green;">底部</footer>

</body>

开启浮动,发现底部样式发生变化，需要清除浮动,如下图：

找到主区域、左区域、右区域的父元素，使用伪元素清除浮动,如下图：

浮动后，主区域占满父元素的宽度（主区域width：100%），因此左区域和右区域被挤下去了

主区域两侧需要留白给左右区域：

圣杯布局的做法：找到主区域、左区域、右区域的父元素，通过设置左右的padding给两侧留白

双飞翼布局：不是专门设置了个div包裹主区域嘛，让主区域相对于那个div，通过margin给两侧留白

左区域上去：负边距 margin-left: -100%;

右区域上去：负边距 margin-left: 负自身个位置（-200px）

至此，双飞翼布局完成，完整代码如下：

<!DOCTYPE html>
<html>

<body>
    <style>
        .left {
            /* 固定大小 */
            width: 100px;
            height: 100px;
            
            /* 左浮动 */
            float: left;

            /* 左区域上去 */
            margin-left: -100%;
        }
        
        /* 包裹住主区域：为了方便主区域使用margin留出两侧空白 */
        .wrapper {
            height: 100px;
            width: 100%;

            /* 左浮动 */
            float: left;
        }

        .center {
            height: 100px;
            /* 自适应 宽度默认为父元素 的宽度，即.wrapper设置的 width: 100% */ 
            
            /* 通过margin留出两侧空白 */
            margin: 0px 200px 0px 100px;
        }

        .right {
            /* 固定大小 */
            width: 200px;
            height: 100px;

            /* 左浮动 */
            float: left;

            /* 右区域上去 */
            margin-left: -200px;
        }

        /* 伪元素清除浮动 */
        .clearfix::after {
            content: "";
            clear: both;
            display: block;
        }

    </style>

    <header style="background-color: green;">双飞翼布局 头部</header>
    <main class="clearfix" >
        <div class="wrapper">
            <div class="center" style="background-color:red ;">主区域</div>
        </div>

        <div class="left" style="background-color: yellow;">左区域</div>
        <div class="right" style="background-color: pink;">右区域</div>
    </main>
    <footer style="background-color: green;">底部</footer>

</body>

圣杯布局和双飞翼布局的区别

主区域两侧留白，圣杯：padding，双飞翼：margin
两侧上去：圣杯：负边距 + 相对定位，双飞翼：负边距，不需要相对定位
双飞翼的主区域需要被一个div包裹，而圣杯不需要

参考：

【CSS】这次带你彻底搞清楚经典的双飞翼布局与圣杯布局 - margin负值 - 浮动 - padding

CSS系列之双飞翼布局与圣杯布局

圣杯布局

双飞翼布局

圣杯布局和双飞翼布局的区别