双飞翼布局是圣杯布局的升级，但是双飞翼布局没有使用相对定位，实现方法是在圣杯布局的基础上新建一个div，只用浮动和负边距就可以实现双飞翼布局。

html

<div class="main-wrap">
  <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

布局步骤：

1. 三者都设置向左浮动
2. 设置main-warp宽度为100%，设置两个侧栏的宽度
3. 设置负边距，sub的负边距设置为100%，extra的负边距设置为自身宽度
4. 设置main的margin值为左右两个侧栏的宽度

css

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

end

一盏灯， 一片昏黄； 一简书， 一杯淡茶。 守着那一份淡定， 品读属于自己的寂寞。 保持淡定， 才能欣赏到最美丽的风景！ 保持淡定， 人生从此不再寂寞。