圣杯布局和双飞翼布局的共同点：
三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。
1、圣杯式布局定义：
圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。
解决方案大体都是三栏全部float:left浮动，而在解决中间栏div的内容不被遮挡上，圣杯布局是中间
栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。
圣杯式布局代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯式布局</title><style>* {padding: 0;margin: 0;}.con{padding-left:150px ;padding-right: 190px;}.left {width: 150px;background: red;float: left;position: relative;margin-left: -100%;left: -150px;}.main {width: 100%;background: yellow;float: left;}.right {width: 190px;background: tomato;float: left;position: relative;margin-right: -190px;left: -190px;}</style>
</head><body><div class="con"> <div class="main">main</div><div class="left">Left</div><div class="right">right</div></div></body></html>
效果图
2、双飞翼布局定义：
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，双飞翼布局是在
中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，
效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
双飞翼布局代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼布局</title><style>* {padding: 0;margin: 0;}.left {background: #E79F6D;width: 150px;float: left;margin-left: -100%;}.main {background: #D6D6D6;width: 100%;float: left;}.mc {margin-left: 150px;margin-right:190px;}.right {background: #77BBDD;width: 190px;float: left;margin-left: -190px;}</style>
</head><body><div class="con"><div class="main"><div class="mc">Main</div></div><div class="left">Left</div><div class="right">Right</div></div></body></html>
效果图
