圣杯布局与双飞翼布局（都是三栏布局）

一、首先我们需要知道两种布局的需求是什么。

需求都是实现如下的三列布局，（重点！！）

1、两侧内容宽度固定，中间内容宽度自适应

2、三栏布局，中间一栏最先加载、渲染出来

即便布局类似，二者还是有本质上的区别：
可以看到，圣杯布局和双飞翼布局最不同的点就是中间栏的区域不同。空口说也说不出个一二三，直接看实现过程👇

---

二、圣杯布局的实现过程

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

这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。

.middle {
    width: 100%;
}
.left {
    width: 100px;
}
.right {
    width: 100px;
}

结果：然后就到了重点，我们需要在每一栏加上浮动向左，因为我们需要他们显示在同一行，但是这样会带来一个问题就是高度塌陷。如图：
然后就到了重点，我们需要在每一栏加上浮动向左，因为我们需要他们显示在同一行，但是这样会带来一个问题就是高度塌陷。如图：

此时我们有两种解决方案，
1、第一个就是在内容区域也就是三栏布局设置overflow:hidden，触发BFC撑开区域。

.content {
    overflow: hidden;
}

2、第二个方法就是在底部footer区域清除浮动，解决高度塌陷：

.footer {
    clear: both;
}

解决完高度塌陷的问题，我们就需要想办法把左边的盒子移动上去。
首先设置middle栏的padding,让中间这一栏左右留出区域方便我们放进去。

.wrapper {
    padding-left: 100px;
    padding-right: 100px;
}

此时我们其实只需要通过相对定位，他们现在可以看成是一行放不下挤成了2行，所以左边这个盒子只需要往左边移动到相应位置，那么需要移动多少？

通过这个图我们可以看到只需要移动middle的宽度+右边留出来的100px。即👇

position: relative;
margin-left: -100%;
right: 100px;

通过这三行代码，分两步，向左偏移100%，并且再偏移一个100px,我们就将左边这个盒子挪到了middle左边了。

接下来就是右边这栏，同理，我们只需要挪动盒子的宽度100px即可。

 margin-right: -100px;

至此，我们可以说已经基本上完成了圣杯布局，我们可以通过拉伸或缩小窗口验证是否为我们想要的效果。

我们可以看到中间这栏是实现了自适应，但是还有一点小缺陷，就是当窗口过小的时候布局会受到影响。 只需要在body上设置最小宽度即可。

body {
    /* 设置最小宽度，防止挤压使中间内容消失 */
    min-width: 600px;
}

总结一下，圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。（是不是很简单！)

---

三、双飞翼布局的实现过程

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

然后不一样的是， 我们不使用相对定位，而是直接通过margin-left，将left栏移动到middle栏上，right栏也一样。

.left {
    margin-left: -100%;
}
.right {
    margin-left: -100px;
}

因为左右两栏覆盖了middle栏的内容。此时应该可以想到，只要将middle栏设置padding即可将内容挤到中间可视区域了。

这里有个问题就是，如果直接在middle栏里面加padding,会导致整个布局乱套。

所以我们需要在middle栏里面再套一层div，那么现在的html就会变成这样：

<div class="header">header</div>
<div class="main middle">
    <div id="main-wrapper">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>

我们在里面这层div上加padding,即👇

.main #main-wrapper {
   padding-left: 100px;
   padding-right: 100px;
}

四、总结

1、相同之处

（1）布局类似，都是实现特定需求的三列布局。

（2）都使用了float浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。

2、不同之处

（1）实现方法的不同：

圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

双飞翼布局是通过float+margin，没有使用相对定位。

（2）怎么处理两列的位置：

圣杯布局是给外部容器加padding，通过相对定位把两边定位出来。

双飞翼布局是靠在中间这层外面套一层div加padding将内容挤出来中间。