是什么？
双飞翼布局是一种常见的网页布局方式，具有两个侧边栏和一个中间内容区域。
与圣杯布局不同的是，双飞翼布局将三个部分放在同一层级的div中，而且左右两个侧边栏的宽度可以不固定，适应更加灵活。
实现方式
方式一：【 flex实现双飞翼布局】
1、给中部父盒子设置宽度100%设置display：flex;，
2、给左侧和右侧盒子设置固定的宽度，高度固定值
3、中间的盒子设置flex-grow: 1;，宽度不设置，高度固定值
4、头部和底部设置宽度100%，高度固定值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{margin:0;padding:0;}.flex {width: 100%;display: flex;text-align: center;}.left {height: 400px;width: 200px;text-align: center;background-color: blue;}.right {height: 400px;width: 200px;text-align: center;background-color: blue;}.center {flex-grow: 1;height: 400px;text-align: center;background-color: aqua;}header {width: 100%;height: 100px;text-align: center;background-color: pink;}footer {width: 100%;height: 100px;text-align: center;background-color: pink;}</style>
</head><body><header>头部</header><div class="flex"><div class="left">左侧盒子</div><div class="center">中部盒子</div><div class="right">右侧盒子</div></div><footer>底部</footer>
</body></html>方式二：【calc实现双飞翼布局】
1、左右两个盒子设置固定的宽度，高度固定值
2、中间盒子的宽度设置为width: calc(100% - “左侧盒子宽度” - “右侧盒子宽度”);注意减号两边的空格，高度固定值
3、三个盒子设置float: left;排在同一行显示，则可以实现双飞翼布局
4、头部和底部设置宽度100%，高度固定值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left {height: 400px;width: 200px;text-align: center;background-color: blue;float: left;}.right {height: 400px;width: 200px;text-align: center;background-color: blue;float: left;}.center {height: 400px;width: calc(100% - 200px - 200px);background-color: aqua;text-align: center;float: left;}header {width: 100%;height: 100px;text-align: center;background-color: pink;}footer {width: 100%;height: 100px;text-align: center;background-color: pink;clear: both;}</style>
</head>
<body><header>头部</header><div class="box"><div class="left">左侧盒子</div><div class="center">中部盒子</div><div class="right">右侧盒子</div></div><footer>底部</footer>
</body>
</html>方式三：【定位实现双飞翼布局】
1、左侧盒子与右侧盒子设置固定宽度，高度固定值，添加左浮动
2、中间盒子宽度设置100%，设置左浮动，高度固定值
3、大盒子左右的padding值分别为左右侧盒子的宽度
4、左侧盒子 margin-left: -100%;，position: relative;，left: -“左侧盒子的宽度”;
5、右侧盒子 margin-left: -“右侧盒子的宽度”px;，position: relative;， right: -“右侧盒子的宽度”px;
6、头部和底部设置宽度100%，高度固定值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{margin: 0;padding: 0;}.box {padding: 0 200px;text-align: center;}header {width: 100%;height: 100px;text-align: center;background-color: pink;}footer {width: 100%;height: 100px;text-align: center;background-color: pink;clear: both;}.center {width: 100%;height: 200px;text-align: center;background-color: blue;float: left;}.left {float: left;margin-left: -100%;width: 200px;height: 200px;text-align: center;background-color: aqua;position: relative;left: -200px;}.right {margin-left: -200px;width: 200px;height: 200px;text-align: center;background-color: green;float: left;position: relative;right: -200px;}</style>
</head>
<body><header>头部</header><div class="box"><div class="center">中部盒子</div><div class="left">左侧盒子</div><div class="right">右侧盒子</div></div><footer>底部</footer>
</body>
</html>
