双飞翼布局是一种灵活的布局，始于淘宝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以上都支持。