标签：
设置3个div
<div class = ‘main‘>
<div class = ‘left;>
<div class = ‘right>
main放在首位是因为一般渲染时候的顺序，我们会想让main比较快地渲染出来，所以div-main放上面
1、如果我们设置不设置div-main，设置div-left（float :left） div-right(float：right）
那么div-main会单独一行，左右会单独占据下一行的左右不分(在文档流以外浮动，相当于覆盖在文档流上面)
2、我们是想一行中让div-main在中间，div-left在左边,div-right在右边。那么我们现在设置div-main为float：right，那么div-main也会脱离文档流，现在三个就会在一行啦
但是现在的问题是，div-main和div-left会根据div-main的宽度左右贴紧，而且div-left和div-right中间有差距，就达不到全部占据一行的效果了，而且div-main会居于左边，
上图：
3、现在，我们把div-main设置为块元素（width：100%，会占据一整行），并且float：left
现在，div-main占据了一行。下面div-left和div-right 居左右，哎~怎么感觉和之前一样了呀，其实不一样，因为现在main是float了，现在就可以进行margin负边距了；
现在三个div的float都设置了，现在设置div-left负边距margin-left：-100%；看看效果
现在div-left跑到main的左边来了，其实它是覆盖上去了，只有当main和left都设置了float才会这样，如果main没有设置float，上图吧
左边的消失了，为啥呢。原来，maigin-left设置了-100%后，他就远离了这一行，其实它还在这里，只是看不见了，太远了，所以现在明白我们要把main的float设置为left的原因了吧。
接下来，对我是右边也一样操作，设置maigin-left：-100px，float：left
现在显示
但是现在还有一个问题，我们的main的内容呢，其实是被left的内容覆盖咯，我们先设置整个包含盒子的padding-left：100px；padding-right：100px；
就成这样了，然后我们把left的position:relative;left:-100px;（意思就是它相对自己移动了100px，100px是它自己的width，relative是个小hack吧。。现在才知道 - -）
right的也一样 position ：relative ；right：-100px
大功告成咯。这就是圣代- -圣杯布局咯
但是吧。因为left和right都设置了relative，这对后面的维护来说可能是致命的，而且设置了padding-left和padding-right的盒子对后面的维护也不利，所以双飞翼诞生了
先把那些不利的设置都去掉，
在div-main里面加一个div-inner包裹内容
设置div-inner的margin-left：100px；margin-right：100px
现在是不是可以啦，我感觉里面设置了inner的属性，就相当于把里面的内容缩小了，因为要留出来maigin啊，总共就width=100%，不能再扩展。里面的就只能为了maigin而缩回去啦，把margin设置为左边和右边的宽度就可以实现这个双飞翼布局啦~
标签：
原文地址：http://www.cnblogs.com/JoeChan/p/4557553.html
