双飞翼布局

那天看了拔赤的web前端开发十日谈，很多年前的了，看到里面有一个名词双飞翼(好诗意的名字）,搜了一下，又对定位有了新的认识。虽然是几年前的东西，已经被无数的人写到烂了，可我还是想写写我的理解。

布局的三个原子技术：浮动，负边距，相对定位。话说我真的没有用过负边距（掩面）。。。

参考内容： http://www.dqqd.me/flying-wing/

人家的html结构长这样

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

可我的就是蛇精病，喜欢结构和页面顺序一样，所以我的长这样了：     

     <div class="bd">
          <div class="sub">
          </div>
          <div class="main">
               <div class="content">
               </div>
          </div>
          <div class="extra">
          </div>
     </div>

因此css也会和参考的不一样，我就不能照抄了。。。

我的长这样：

sub,main,extra都加上float属性，可是因为main的width:100%;所以还是会分成3行。sub加上一个负边距（值等于它的宽度），main加上相应的正边距，它们在一行了，main还有200px是超出可视屏幕范围的，会出现滚动条，然后extra加上500px的负边距（超出的200px+它本身的宽度），它就出现在正确的位置，然后就是main的啦，里面加多一层content,加一个500px的右边距，，他的位置也好了，bd的overflow:hidden;滚动条没了，大家的位置都好了，妥妥的~

把所有数字罗列出来，它们是有规律的。

另一种实现方案：

其实我也有点confused，什么时候是margin-left的负外边距，什么时候是margin-right的负外边距？

其实按这个原理，必要时再加个相对定位，各种布局都会可以ko。

再举多一个更加简单的栗子： 

     <div class="bd">
          <div class="sub">
          </div>
          <div class="extra">
          </div>
          <div class="main">
               <div class="content">
               </div>
          </div>    
     </div>    

加了float属性，sub,extra都很简单的就在自己的位置上了，main在另外一行。加上右外边距的-500px他就和另外两个同行了，不过有500px超出屏幕大小出现滚动的。overflow:hidden;你懂的。content右外边距500也可以算出来啦。