圣杯和双飞翼到底做了什么
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
简述
圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局：通过淘宝将圣杯布局的改进，改为了双飞翼布局，双飞翼布局集合了所有的css2核心的属性特点，因为css2也兼容css3。其中使用了，定位，浮动，负边距，等高，盒子模型，清除浮动。这些特性在双飞翼布局中也是使用的淋漓尽致，所以这也是为什么经常会在面试中被问到。为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。
区别：
| 优点 | 缺点 | |
| 圣杯 | 不需要多余的dom节点 | 中间宽度不能小于左边或者 右边的宽度，否则影响布局 |
| 双飞翼 | 可以优先渲染中间部分 | 需要子元素固定中间的内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
#center {
float: left;
width: 100%;
/*左栏上去到第一行*/
background: orange;
}
#left {
float: left;
width: 180px;
margin-left: -100%;
background: red;
}
#right {
float: left;
width: 200px;
margin-left: -200px;
background: yellow;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside {
margin: 0 200px 0 180px;
}
#center,#left,#right{
padding-bottom:9999px;
margin-bottom:-9999px;
}
.container{
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div id="center">
<div id="inside">middle</div>
</div>
<div id="left">left
<br>
hah
</div>
<div id="right">right</div>
</div>
</body>
</html>
现在三列布局可以了，但是三列不能等高了，如何让所有的列都一起等高，这样的话效果就比较完美了。
height：100%；在很多浏览器中是不兼容的。所以这样肯定是不行的。
接下来我们可以使用padding和margin来实现等高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
#center {
float: left;
width: 100%;
/*左栏上去到第一行*/
background: orange;
}
#left {
float: left;
width: 180px;
margin-left: -100%;
background: red;
}
#right {
float: left;
width: 200px;
margin-left: -200px;
background: yellow;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside {
margin: 0 200px 0 180px;
}
</style>
</head>
<body>
<div id="center">
<div id="inside">middle</div>
</div>
<div id="left">left
<br>
hah
</div>
<div id="right">right</div>
</body>
</html>