雙飛翼佈局是一種靈活的佈局，始於淘寶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以上都支持。