1、雙飛翼布局概述
雙飛翼布局同樣來源淘寶，可以說是借鑒了圣杯布局，同時也解決了圣杯布局使用相對定位的缺陷。
2、雙飛翼布局實現思路
（1）與圣杯布局一樣，利用負邊距技術實現初步效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙飛翼布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.left{
width:198px;
height:200px;
float:left;
border: 1px solid red;
margin-left :-100%;
}
.right{
width:198px;
height:200px;
border: 1px solid blue;
float: left;
margin-left :-200px;
}
.center{
width : 100%;
height:200px;
float: left;
background :gray;
}
.footer{
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
運行效果：
image.png
（2）在cetner元素中間添加一個元素，設置margin-left和margin-right
center部分html源代碼修改：
<div class="center">
<div class="center-inner">
center
</div>
</div>
center-inner 樣式添加
.center-inner{
margin-left:200px;
margin-right:200px;
background:red;
}
運行效果：
image.png
3、等高雙飛翼布局實現
（1）使用包裹元素contianer的overflow:hidden 觸發BFC。
（2）使用 padding-bottom: 9999px; margin-bottom: -9999px;將元素展開，然后再把元素收回。
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙飛翼布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.container{
overflow: hidden;
}
.left{
width:198px;
float:left;
border: 1px solid red;
margin-left :-100%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right{
width:198px;
border: 1px solid blue;
float: left;
margin-left :-200px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center{
width : 100%;
float: left;
background :gray;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center-inner{
margin-left:200px;
margin-right:200px;
background:red;
}
.footer{
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">
<div class="center-inner">
center<br/>
center<br/>
center<br/>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
運行效果：
image.png
