双飞翼布局是一种灵活的布局，始于淘宝UED，应该是玉伯提出的。如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。
来查看一个基本实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8' />
<title>双飞翼布局实例</title>
<meta name='author' content='独行冰海' />
<style>
.main {
float: left;
width: 100%;
background:#39c;
height:300px;
}
.sub {
float: left;
width: 480px;
margin-left: -100%;
background:#f60;
height:300px;
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background:#666;
height:300px;
}
</style>
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="ft"></div>
</div>
</body>
</html>
优点：
实现了内容与布局的分离，即Any-Order Columns.
main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏，不会出问题。
需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
在浏览器上的兼容性非常好，IE5.5以上都支持。