左、右栏固定。中间自适应，而且中间需要优先加载。
确定的架构：
<body>
<header>头部</header>
<div class="center">主区域</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
<footer>底部</footer>
</body>
1.首先我们需要优先加载主区域，所以把主区域放最前面，我们需要把主区域、左区域、右区域设置到同一行所以
.center,.left,.right{
float:left;
}
2.但是这样后会产生塌陷
给中间区域加上一个标签，包裹他们
<body>
<header>头部</header>
<div class="clearfix">
<div class="center">主区域</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<footer>底部</footer>
</body>
3.然后变成了这个样子
4.我们需要把左右的距离空出来
.wrapper{
height:200px;
background-color: darkgreen;
padding:0 100px;
}
5.我们需要让红色块（left）移到上面玫色块（center）
因为玫色（center）和红色(left)都加了浮动，所以使用margin-left:-100%,是相对于上一个浮动的盒子
.left{
height:100px;
width:100px;
float:left;
background-color: darkred;
margin-left: -100%;
}
6.让红色（left）移到左边
.left{
height:100px;
width:100px;
float:left;
background-color: darkred;
margin-left: -100%;
position:relative;
left:-100px;
}
7.让藕粉（right）移动到上面
.right{
height: 100px;
width:100px;
float:left;
background-color: darksalmon;
margin-right: -100%;
}
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯</title> <style> .wrapper{ height:200px; background-color: darkgreen; padding:0 100px; } .center{ height:100px; width:100%; float:left; background-color: darkmagenta; } .left{ height:100px; width:100px; float:left; background-color: darkred; margin-left: -100%; position: relative; left:-100px; } .right{ height: 100px; width:100px; float:left; background-color: darksalmon; margin-right: -100%; } </style> </head> <body> <header>头部</header> <div class="wrapper"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> <footer>尾部</footer> </body> </html>1.双飞翼可以看成，中间一个鸟，左右是鸟的翅膀
一开始的架构：
<body>
<header>头部</header>
<div class="wrapper">
<div class="center">
<div class="inner">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>尾部</footer>
</body>
2.需要为左右两边留出翅膀的位置
.inner{
margin:0 100px;
}
3.让center、left、right都在一行上，都加左浮动
4.让left往上走
.left{
height:100px;
width:100px;
background-color: darkslateblue;
float: left;
margin-left: -100%;
}
5.right往右上走
.right{
height:100px;
width:100px;
background-color: darkturquoise;
float:left;
margin-left: -100px;
}
总代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼</title> <style> *{ margin:0; padding:0; } .wrapper{ height:100px; } .center{ height:100px; background-color: darkseagreen; width:100%; float:left; } .inner{ margin:0 100px; background-color: forestgreen; } .left{ height:100px; width:100px; background-color: darkslateblue; float: left; margin-left: -100%; } .right{ height:100px; width:100px; background-color: darkturquoise; float:left; margin-left: -100px; } </style> </head> <body> <header>头部</header> <div class="wrapper"> <div class="center"> <div class="inner">center</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <footer>尾部</footer> </body> </html>思路：一个左浮，一个右浮，中间盒子再腾出两边位置；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Float</title> <style> *{ margin:0; padding:0; } .left{ width:100px; background-color: forestgreen; float:left; } .right{ width:100px; background-color: gold; float:right; } .center{ background-color: dodgerblue; margin:0 100px; } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </body> </html>左右盒子都绝对定位，中间盒子腾出左右盒子的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> *{ margin:0; padding:0; } .left{ width:100px; background-color: forestgreen; position:absolute; top:0; left:0; } .right{ width:100px; background-color: gold; position:absolute; right:0; top:0; } .center{ background-color: dodgerblue; margin:0 100px; } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </body> </html>
