双飞翼布局和圣杯布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
双飞翼的布局与实现原理（推荐使用双飞翼布局）
双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。
双飞翼布局代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.header,.footer{height: 200px;width: 100%;background-color: #00FFFF;}.content,.left,.right{height: 200px;float: left;}.container::after{content: "";display: block;clear: both;}.content{width: 100%;background-color: pink;}.left{width: 300px;background-color: red;margin-left: -100%;}.right{width: 300px;background-color: grey;margin-left: -300px;}.center{height: 200px;margin-left: 300px;margin-right:300px ;}body{min-width: 600px;}</style></head><body><div class="header">头部</div><div class="container"><div class="content"><div class="center">中间</div></div><div class="left">左边</div><div class="right">右边</div></div><div class="footer">尾部</div></body>
</html>
运行效果：
圣杯布局的实现原理
要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签
圣杯布局代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.header,.footer{height: 200px;width: 100%;background-color: #00FFFF;}.center,.left,.right{height: 200px;float: left;}.left,.right{width: 300px;}.center{width: 100%;background-color: pink;}.left{background-color: red;margin-left: -100%;position: relative;left: -300px;}.right{background-color: lawngreen;margin-left: -300px;position: relative;left: 300px;}.container::after{content: "";display: block;clear: both;}.container{padding-left: 300px;padding-right: 300px;}body{min-width: 900px;}</style></head><body><div class="header">头部</div><div class="container"><div class="center">中间</div><div class="left">左边</div><div class="right">右边</div></div><div class="footer">尾部</div></body>
</html>
运行效果：
