这是我参与更文挑战的第14天，活动详情查看：更文挑战
作为三列布局，圣杯和双飞翼布局是最常见的布局了，接下来我们一步一步来实现。
一、圣杯布局与双飞翼布局
首先我们需要知道两种布局的需求是什么。
需求都是实现如下的三列布局，（重点！！）
1、两侧内容宽度固定，中间内容宽度自适应
2、三栏布局，中间一栏最先加载、渲染出来
即便布局类似，二者还是有本质上的区别：
可以看到，圣杯布局和双飞翼布局最不同的点就是中间栏的区域不同。空口说也说不出个一二三，直接看实现过程👇
二、圣杯布局的实现过程
首先写一下基本的html：
<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放在第一个。
然后写一下基本的CSS，加上背景颜色和宽高方便查看：
基本的布局搭好之后，我们只需要将中间三个实现成我们需要的三栏布局就好了。
首先设置一下左右两栏的宽度，中间栏由于是自适应，所以宽度设置成100%。
.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定位到相应位置。（是不是很简单！)
三、双飞翼布局的实现过程
我们再来看看双飞翼布局的实现，首先也是写一下基本的html：
<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文本了）
因为左右两栏覆盖了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将内容挤出来中间。
以上即是我对圣杯布局和双飞翼布局的实现过程和总结，如有错误，欢迎指出~~
