圣杯布局
核心实现：中间三栏都得使用浮动再加上relative，然后父元素使用padding空出左栏和右栏的宽度位置，中间元素使用100%宽度，
这样左中右就已经在一竖列了，配合浮动使用margin-left(右边栏right): -100%可以让margin基于自身往左（往右）偏移（一定要在全部都浮动的同级元素使用才有效），在这里
通过使用可以让左右边栏和中间栏进行重合，再使用定位left(right)，把边栏移到基于自身的指定位置就行。
双飞翼布局
核心实现：中间三栏都得使用浮动，中间栏宽度设为100%嵌套一个子盒子，子盒子用margin撑出两边栏的宽度，左边栏是使用margin-left:-100%使多列变为一行，右边栏使用margin-left: -边栏宽度 实现一行
共同点
- 都属于上中下，左中右上下三栏布局
- 都是中间内容居中展示，两边定宽
- 都是通过浮动+margin-left: -100%实现同行，中间自适应宽度
区别
- 圣杯布局是使用relative定位把边栏移到指定的横向位置，用到了left(right)
- 双飞翼是通过创建中间盒子的子div，用margin撑出左右边栏的宽度，省去了定位
- 在对右边栏写样式的时候，圣杯布局使用margin-right: -100%;或margin-left:-右边栏宽度;都能实现定位；但是双飞翼布局只能使用margin-left: -右边栏宽度，如果使用margin-right会溢出屏幕一个右边栏的宽度；造成这个原因可能是margin-100%会相对于上一个元素来进行定位判断，双飞翼中left是根据width100%的中间元素来判断的，所以right自然也是根据width100%来判断的，圣杯就不同是根据body中已经padding好了的来判断。
3+再深一点，两种布局方式通过调试器看边栏，margin区域+内容区域 = 中间栏的宽度，这也是为什么使用浮动，都把中间栏放在第一个写，让后面两个边栏元素都要基于他浮动。双飞翼相对的是充满屏幕100%的来margin，所以这时候用了margin-right自然就到屏幕外面去了所以只能用margin-left，而圣杯模式是相对于已经居中了的center来，所以他只能用margin-right,-100%或者具体像素都可以，如果使用margin-left就会抢占center的位置。
附录： 代码
圣杯
<!DOCTYPE html\>
<html lang\="en"\>
<head\>
<meta charset\="UTF-8"\>
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
<title\>Document</title\>
<style\>
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
right: 200px;
margin-left: \-100%;
}
#right {
width: 150px;
margin-right: \-150px;
}
</style\>
</head\>
<body\>
<div id\="container"\>
<div id\="center" class\="column"\>1111</div\>
<div id\="left" class\="column"\>222</div\>
<div id\="right" class\="column"\>333</div\>
</div\>
</body\>
</html\>
双飞翼~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%
}
#right {
width: 150px;
margin-left: -150px;
}
</style>
</head>
<body>
<div id="container" class="column">
<div id="center">1111</div>
</div>
<div id="left" class="column">222</div>
<div id="right" class="column">333</div>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。