圣杯布局：
原理：给包裹层设置左右padding值空出left和right的位置，使用负边距，左边margin-left：-100%，右边margin-left：-100px；此时左右两个盒子位于主盒子两侧但是会遮挡住主盒子的内容，所以再给左盒子position：relative，left：-100px，右盒子position：relative；right：-100px，使左右两个盒子定位正确。
/*html部分*/
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
<div>
/*css部分*/
.container{padding：0 100px 0 100px;}
.main{ float: left;width:100%;}
.left{float:left;width:100px;margin-left:-100%;position:relative;left:-100px}
.right{float:left;width:100px;margin-left:-100px;position:relative;right:-100px}
双飞翼布局：
原理和圣杯布局有点像都是使用margin负边距达到目的，不同的是双飞翼布局将主盒子外包装一层div，使用主盒子的左右外边距解决主盒子被遮挡的问题。
/*html部分*/
<div class="container">
<div class="main-wrap">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
/*css部分*/
.main-wrap{width:100%;float:left}
.main{margin:0 100px 0 100px;}
.left{float:left;margin-left:-100%;width:100px;}
.right{float:left;margin-left:-100px;width:100px;}