笔者在一些博客和论坛中经常看到经典的双飞翼布局，淘宝的首页也运用了这种兼容性很好的双飞翼布局
1.何谓双飞翼布局？
简单来说，双飞翼布局是将一个网页分为左列，中列和右列三部分，并且我们要得到的效果是：
左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。
2.如何实现双飞翼布局？
（1）首先我们要得到如下的布局样式：
<div class="container"> <div class="column" id="center_panel"></div> <div class="column" id="right_panel"></div> <div class="column" id="left_panel"></div> </div>
可以看到我们在外层用一个类名为：container的大的div包裹。而内层分为了我们所说的三列
但是注意，在整个dom结构中，主列位于最前面
（2）让列开始浮动
我们让列全部浮动起来
.column{
float:left
}
并设置
.container{
width:100%;
}
.center_panel{
width:100%;
}
于是在这种情况下，center_panel已经占据了整个container父元素的全部宽度，并且这个宽度是自适应的
（3）如何实现左右列固定宽度
在实现左右列固定宽度时，我们这里采用了margin负值
首先，得到左列固定宽度，我们会有：
#right_panel{
width:300px;
margin-left:-100%; }
这里我们假设，固定宽度的左列宽度为300px,当margin-left:-100%之时，这个左边列会脱离自己所在行，向上一行浮动，
效果为：
此时我们实现了左列固定宽度，中间列自适应
再次，我们根据同样原理，定义右列的浮动偏移（margin负值）
#left_panel{
width:300px;
margin-left:-300px;
}
这样，我们就实现了我们所需要的双飞翼布局，也就是中间列宽度自适应，左列和右列的宽度固定
我们所得到的效果为：
3.双飞翼布局的优点
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载