一、圣杯布局

1、前言

在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局。其中，将中间栏放到文档流前面，保证最先渲染；三栏全部都使用“float:left”浮动，并配合left和right属性完成我们需要的效果。

2、效果图

为了大家能够知道我们要干什么，首先附上效果图，大家也可以跟着我一起思考一下可以如何实现（just think）

3、快乐交流

这个图片就是我们要实现的效果，这个时候善于思考的同学可能会想到定位实现，然后告诉旁边正在思考的同学说：“这很简单嘛，直接定位就可以了，左右两个盒子给个宽度，中间盒子再给个左右的margin，然后左右两个盒子再绝对定位一下，这不就可以了嘛”，然后旁边的同学听到当然不服气呀，咱怎么可以输给他呢，于是乎就想到了采用弹性布局，他就兴冲冲的告诉想到定位的同学说：“我觉得flex也可以实现，body采用flex布局，然后左右两个盒子给一定的宽度，中间的盒子再给一个flex：1就可以实现效果了。”其实只要实现这样的效果我们会有很多的方法，但是今天我们首先想要讲的是采用圣杯布局来实现上述效果。下面进入正题

我先给大家解释一下圣杯布局的实现哈，然后代码部分放在最后面

• 首先给wrap设置左右的padding为200px
• 为了最先渲染，content放在最前面，然后放left和right，这两者顺序不做要求
• 给left和right宽度和高度都设置为200px，中间content宽度为100%撑满，高度也设置为200px
• 然后将三个盒子都设置为浮动，也就是wrap下的div都设为float:left 前四步做完之后页面就会变成下图所示这个样子

• 接下来设置left的margin-left: -100%;,就可以让left回到上一行的最左侧，页面变成下图所示

• 然后给left设置position：relative，并设置left的left：-200px，使其回到整个body的最左侧 页面变成下图所示

最后同理给right设置margin-left: -200px，把它拉回到第一行，但是这样子body的最右边就会留下一块白的地方。

如下图所示

然后我们设置right的position:reletive,将right向右移200px，即设置right的left：200px，这样就完成了我们最后的效果了。

4、代码部分

body部分的代码示例如下

    <div class="wrap">
        <div class="content">content</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

这个时候的页面就是这样子的 css部分的代码示例如下

        *{
            margin: 0;
            padding: 0;
        }
         .wrap{
            padding: 0 200px;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .content{
            height: 200px;
            width: 100%;
            background: aqua;
        }
        .wrap div{
            float: left;
        }
        .left{
            position: relative;
            left: -200px;
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
       
    </style>

最后页面的效果就会是这个样子

二、双飞翼布局

1、前言

双飞翼布局在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。

2、效果图以及实现思路

和圣杯布局一样为了大家能够知道我们要干什么，先附上效果图 双飞翼布局的实现

• 首先我们将content、left、right都设置为float:left,并且设置left和right的高度和宽度都为200px，设置content的宽度为100%，高度也为200px；
• 接着设置left的margin-left:-100%,使其到body的最左侧覆盖在content上
• 然后设置right的margin-left：-200px；
• 最后为了inner中的主要内容能够加载出来，我们还需要设置inner的margin左右为200px，这样就可以实现最后的效果了。

3、代码部分

相比之下，双飞翼布局比圣杯布局更好理解，也更为简化。

body部分的代码

    <div class="wrap">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

css部分的代码

        *{
            margin: 0;padding: 0;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .content{
            height: 200px;
            background-color: aqua;
            float: left;
            width: 100%;
        }
        .inner{
            margin: 0 200px;
            height: 200px;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
    </style>

下图就是最后页面的样子

4、总结

• 圣杯布局其实还有别的实现方法，例如flex和grid，感兴趣的同学也可以自己了解一下，我这里采用的是margin来实现的。
• 双飞翼布局相对来说就比较容易理解一点，双飞翼布局省去了很多css，而且由于不用使用定位，可以获得比圣杯布局更小最小宽度。 最后，学无止境，欢迎友友们指正批评。