参考：
圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED：
http://www.imooc.com/wenda/detail/254035
博客：http://www.cnblogs.com/imwtr/p/4441741.html
理解：
圣杯布局和双飞翼布局均可以实现一个三栏布局：中间栏先加载，然后是左栏，右栏；左右两栏宽度固定，中间栏宽度自适应（会根据浏览器的窗口的大小而变化。）
圣杯布局实现原理：
（1）定义一个div，class为container容器，包含以下三个div，分别表示main（中间栏），left（左栏），right（右栏），注意：div的顺序分别是main，left，right，因为根据HTML文档的加载原理，写在前面的先加载到，所以要把main写在最前面。
（2）让main ，left， right都左浮动。
（2）定义高度。
（3）定义宽度：main为100%，left和right可以为一个固定的宽度，eg：300px；
（4）由于main的宽度有100%，所以会left和right会被挤到下面。
此时需要定义左栏left浮动到最左边：margin-left : -100%；同理定义右栏浮动到最右边：margin-left：-300px；
（5）通过以上四步，实现了三栏，中间自适应布局，但是由于main的宽度是100%，此时main中的内容是会被left和right遮挡住的。
因此需要为container容器定义padding-left和padding-right，宽度分别为left和right的宽度，但是这样会导致left和right也会更着过来，不再是在浏览器窗口的最左端和最右端，如下图所示：（红色画圈部分为设置的padding，这里还是会遮挡住main的内容。）
（6）对left和right进行相对定位：分别是：left：-300px；right：-300px；使其回到浏览器的最左端和最右端。自此，完成，main的内容也不会被遮挡了。
1.圣杯布局（完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.container{
overflow: hidden;
padding: 0 300px;
}
.col{
position: relative;
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.left{
margin-left: -100%;
left: -300px;
}
.right{
margin-left:-300px;
right: -300px;
} </style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">main</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>
双飞翼布局实现原理：
双飞翼布局的前四步和圣杯布局是相同的，只是在处理main内容被遮挡的方法不同：双飞翼布局采用的方法是为main加一个div的遮罩，为这个遮罩设置margin-left和margin-right，左栏和和右栏宽度都为300px的div，遮罩可以这样设置：margin：0 300px;
2.双飞翼布局（完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.col{
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.main-wrap{
margin: 0 300px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -300px;
}
</style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">
<div class="main-wrap">
main
</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>