双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

仔细分析各类布局的技术实现，能够发现下面三种技术被常常使用：

• 浮动 float
• 负边距 negative margin
• 相对定位 relative position

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各类布局的实现方案。

尝试之路考虑如下DOM结构：

<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>

利用浮动元素的负边距来定位：

.main {        
           float: left;       
           width: 100%;   
 }  
.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;    
}   
.extra {        
             float: left;        
             width: 190px;        
             margin-left: -190px;   
 }

这样咱们获得了第一个尝试页面 点击这里查看效果

能够看出，经过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个天然的想法是，给main的容器#bd添加padding:

#bd {        
          padding: 0 230px 0 190px;   
 }

点击这里查看效果

这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：

.sub {        
           float: left;        
           width: 190px;        
           margin-left: -100%;        
           position: relative;        
           left: -190px;    
}  
  .extra {        
             float: left;        
             width: 230px;        
             margin-left: -230px;        
             position: relative;        
             right: -230px;    
}

很明显，这就是圣杯布局！
在不增长任何额外标签的假设上，我尝试了各类想法，但始终都没找到完美的布局实现（圣杯布局是我以为全部想法中最接近完美的）。
既然不添加额外标签时，完美布局的实现如此困难，那若是容许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增长了一层包裹：

<div id="main" class="column">   <div id="main-content">#main</div>

</div>

里层main-content的做用就是将main定位到合适的位置，并方便设置padding等属性。想到此处，就像牛顿被苹果砸傻了同样，原来的main定位问题迎刃而解：

<div id="page">   <div id="bd">   <div class="main"></div>   </div>   </div>

CSS仅需增长一行：

.main-wrap {    margin: 0 230px 0 190px;}

想看example4效果点这里

一切如此简单！除了添加了一个额外标签，其它各方面，表现都很完美（试了下IE5.5, 也没任何问题）。目前只用到了浮动和负边距，若是再引入相对定位，还能够实现三栏布局的各类组合

.extra {        
            float: left;        
            width: 230px;        
            margin-left: -100%;        
            position: relative;        
             left: 190px;    
         }    
.main-wrap {        
                  margin-left: 430px;   
                 }

点击这里查看example5效果

仔细查看example5和example4的源代码，能够发现DOM结构是彻底同样的，仅仅CSS稍有不一样。这意味着HTML结构和CSS布局在必定程度上解耦了，咱们开发HTML代码时，从内容出发便可，无需过多的考虑布局。这正是渐进加强在前端工做流程上的体现。
若是把三栏布局比做一只大鸟，能够把main当作是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，而后再将翅膀移动到适当的地方。所以请允许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.
就如上图中的鸟有各类姿式同样，利用双飞翼布局，咱们也能够实现各类布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。

优势

• 实现了内容与布局的分离，即Eric提到的Any-Order Columns.
• main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
• 任何一栏均可以是最高栏，不会出问题。
• 须要的hack很是少（就一个针对ie6的清除浮动hack:_zoom: 1;）
• 在浏览器上的兼容性很是好，IE5.5以上都支持。

不足

• main须要添加一个额外的包裹层。
• 等待你的发现与反馈。

双飞翼的布局很是灵活，只要调整css代码就能够搞定一切。最近在一个论坛项目中准备尝试使用这个布局。但愿你们有更好的布局方法必定要多多分享。

来源： <http://www.dqqd.me/flying-wing/>