圣杯布局和双飞翼布局

解决问题
1. 两侧定宽，中间自适应
2. 中间栏优先加载渲染

两者的共同点和区别

圣杯布局和双飞翼布局都是三栏布局，三栏都左浮动。

圣杯布局的三栏是独立的，互相之间没有覆盖。

双飞翼布局的三栏不是独立的，left和right模块覆盖在中间容器的左右两端，像是两个翅膀一样。

圣杯布局使用容器的padding-left和padding-right来为left和right模块留出位置，但是由于padding是三个模块的共同父亲产生，left模块和right模块使用margin-left:-100%和margin-left:-right宽度往回拉后，都被挤到了中间center容器的上面，必须再次使用position:relative来将各自复位。

双飞翼布局的改进就是，对中间容器使用margin-left和marign-right来留出位置，而不是使用大容器的padding。由于中间容器浮动，还要沾满100%宽度，所以中间容器嵌套了一个内部容器，外部容器宽度依然100%，内部容器使用marign-left和margin-right来留出位置。这样，left和right容器，直接使用margin-left:-100%和margin-left:-right宽度就可以将其拉回到对应位置，没有了相对定位的麻烦。

来历
圣杯布局的来历是2006年发在a list part上的这篇文章：http://alistapart.com/article/holygrail
双飞翼布局是淘宝UED对圣杯布局的改进，去除相对定位的性能影响：http://www.imooc.com/wenda/detail/254035
双飞翼能够兼容到 IE6，其可以实现的各种布局，可以参考玉伯分享的 DEMO

圣杯布局

<div class="wrap">
    <div class="center con"></div>
    <div class="left con"></div>
    <div class="right con"></div>
</div>

$left: 190px;
$right: 230px;

body{min-width:(2*$left + $right);}
.wrap{padding-left:$left;padding-right:$right;}
.center{float:left;width:100%;background:#D6D6D6}
.left{float:left;width:$left;margin-left:-100%;position:relative;right:$left;background:#77BBDD}
.right{float:left;width:$right;margin-right:-$right;background:#FF6633}
.con{height:300px;}

双飞翼

<div class="wrap">
    <div class="center con">
        <div class="center_in"></div>
    </div>
    <div class="left con"></div>
    <div class="right con"></div>
</div>

$left: 190px;
$right: 230px;

body{min-width:(2*$left + $right);}
.center{float:left;width:100%;background:#D6D6D6}
.center_in{margin-left:$left;margin-right:$right;}
.left{float:left;width:$left;margin-left:-100%;background:#77BBDD}
.right{float:left;width:$right;margin-left:-$right;background:#FF6633}
.con{height:300px;}

 

参考：http://www.cnblogs.com/cobby/archive/2012/05/09/2491812.html

　　　http://www.cnblogs.com/zhuyingyan/archive/2012/09/20/2694522.html