圣杯布局？双飞翼布局？

现在写样式各种 flex 有没？不去兼容ie家族相当的爽有没？react vue angular 各种用，再也不用繁琐的操作dom 有没有？的确，随着前端的发展，现在写代码很少去兼容那个恶心的ie 6 7 8 了，但是不免有些项目比如银行政府等项目，后台系统等还是要考虑ie 的兼容，记得几年前面试时候面试官很容易问的就是实现一个左侧固定，右侧自适应的布局，或者让你写个圣杯布局，双飞翼布。刚开始听到这两个词你会觉得很有意思，所以就再来温习下着两个。

圣杯布局

html 结构

结构很简单，分为一个头部，一个底部，中间内容区域又分为左侧，主要内容区和右侧。 下面简单的增加下样式

我们看下渲染的样式

第一步

将 main left right 全部左浮动,container 设置overflow:hidden 出发BFC

第二步

设置main 的宽度为100%

.main{width:100%}
复制代码

第三步

设置left和right负margin-left值

-100% 会让left 向左移动100% 父行宽距离，同时right 会移到最左侧，然后设置right的margin-left 等于-200px， right 便会移动到上一行的末尾。

但是你会发现main 中的文字不见了，原因是被left 遮挡了，现在main 的内容区是100% 父元素宽的，怎么让main 不被遮挡呢？

第四步

解决中间栏被遮挡问题 给container 增加左右padding 同时把left 和 right 定位到相应位置

.container{padding:0 200px;}
复制代码

.left{position:relative;left:-200px;}
.right{position:relative;right:-200px;}
复制代码

到此，我们的圣杯布局就完成了。

双飞翼布局

双飞翼布局和圣杯布局的前3步都是一样的，区别在于第四步（解决中间栏不被遮挡的问题），下面看下圣杯布局的实现。

双飞翼布局的html 结构发生了一点变化

如图，可以看到双飞翼布局把中间层又包了一层

.content{margin:0 200px;}
复制代码

双飞翼布局没有了container 的padding 和 left right 的定位，用一个content 层的左右margin 值来解决中间内容区被遮挡的问题。

总结

圣杯布局和双飞翼布局都把中间列放到前面，实现了主要内容优先加载，并且都兼容ie6以上。个人觉得双飞翼布局好一点，相信你在工作中肯定遇见过这样的布局，不知道你是怎么实现的呢？本文如有不正确之处，欢迎留言指正。