CSS经典布局之双飞翼布局

双飞翼布局始于淘宝UED。
双飞翼布局主要解决两个问题：
1、三列式布局，左右宽度固定，中间宽度自适应；
2、中间栏在浏览器中有限展示渲染。

中间栏在浏览器中先加载比较好实现，浏览器会按照html文档中的顺序渲染，所以只需要把中间列写在前边就可以了。
如下面所示：
HTML

<div class="page">
    <div class="col-main">主列</div>
    <div class="col-sub">子列</div>
    <div class="col-extra">附加列</div>
</div>

但是写在前面也会显示到前面，接下来就是float定位了。
怎么能实现主栏居中呢？
①、【主列】：浮动左侧，宽度设为100%（都占满了，还玩毛啊）
②、【子列】：浮动左侧，固定宽度100px，左边界为-100%（这是关键：浮动情况下，负边界值会导致DIV上移，使用-100%可以确定它移动到最左侧。）
③、【附加列】：浮动左侧，固定宽度200px，左边界为-200px；（道理同上，负左边界一定要大于或等于DIV的宽度，才能靠到上一行去）

这样，子列在左侧，附加列在右侧，主列在中间了，但是还是有个问题，就是主列宽度设定的为100%，所以会被左右两侧覆盖。重点来了，那就是给主列增加一层包裹层。

HTML

<div class="page">
    <div class="col-main">
        <div class="main-box">主列</div>
    </div>
    <div class="col-sub">子列</div>
    <div class="col-extra">附加列</div>
</div>

给增加的包裹层
增加css

.main-box{margin:0 210px 0 110px;}

效果

双飞翼布局的好处
1、可以实现主要内容先加载的优化；
2、兼容目前所有主流浏览器，包括ie6；
3、布局灵活，只要调整css代码就可以实现不同布局。

双飞翼布局的要点就是：float和负边距。