先看一下常规效果：
为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：
<div class="wrap">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30%
首先呢，我们需要把这三列都浮动起来，即：
.main,.left,.right { float:left; height:200px; }
说明：这里的高度是我自己设置的，在实际布局中可以根据需要来定，他们可以任意设置自己的高度。
主体main的宽度要自适应，那么可以先设置为100%，然后随便上个背景色与”翼“做区分
.main { width:100%; background:#ace; }
接下来便是”翼“的设置了
左边：
.left { width:20%; background:#eee; }
右边：
.right { width:30%; background:#ddd; }
基本样式已设置完成，但预览页面你会发现并没有达到预期的效果。。。
那么接下来，我们应该怎么做呢？
大家可以回想一下margin的用法，对于其负值有很奇妙的用法（这里不多做说明，文章最后我会推荐一些相关文章，感兴趣的童鞋可以看看），而在这里，关键也是运用margin负值才得以实现效果。
回到题目中，想要left居左，那么我们可以设置 margin-left:-100%; 即：
.left { width:20%; background:#eee; margin-left:-100%; }
说明：这里的100%为main的宽度，相当于是把left给左移了，刚好实现左边与main的对齐。
对于right居右问题，也是类似可以设置margin-left:30%; 即：
.right { width:30%; background:#ddd; margin-left:-30%; }
说明：这里的30%为right自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐。
这时，整个布局看起来像是完成了，其实还剩关键的一步，即main的位置该如何设置？目前，他的左边及右边部分元素是会被left/right挡住的，所以我们还必须在main里面再添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。
延伸：对于这种方法，同时也可以随便调换他们的位置，你只需要控制他们的位移即可，都是成功的，这点大家可以做个尝试。
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。