CSS之圣杯布局与双飞翼布局 - 掘金

　　这是我参与更文挑战的第14天，活动详情查看：更文挑战

　　作为三列布局，圣杯和双飞翼布局是最常见的布局了，接下来我们一步一步来实现。

　　首先我们需要知道两种布局的需求是什么。

　　需求都是实现如下的三列布局，（重点！！）

　　1、两侧内容宽度固定，中间内容宽度自适应

　　2、三栏布局，中间一栏最先加载、渲染出来

　　即便布局类似，二者还是有本质上的区别：

　　可以看到，圣杯布局和双飞翼布局最不同的点就是中间栏的区域不同。空口说也说不出个一二三，直接看实现过程👇

　　首先写一下基本的html：

　　这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。

　　然后写一下基本的CSS，加上背景颜色和宽高方便查看：

　　基本的布局搭好之后，我们只需要将中间三个实现成我们需要的三栏布局就好了。

　　首先设置一下左右两栏的宽度，中间栏由于是自适应，所以宽度设置成100%。

　　然后就到了重点，我们需要在每一栏加上浮动向左，因为我们需要他们显示在同一行，但是这样会带来一个问题就是高度塌陷。如图：

　　此时我们有两种解决方案，

　　1、第一个就是在内容区域也就是三栏布局设置，触发BFC撑开区域。

　　解决如下：

　　2、第二个方法就是在底部footer区域清除浮动，解决高度塌陷：

　　同样也能解决👇

　　解决完高度塌陷的问题，我们就需要想办法把左边的盒子移动上去。

　　首先设置middle栏的,让中间这一栏左右留出区域方便我们放进去。

　　此时我们其实只需要通过相对定位，他们现在可以看成是一行放不下挤成了2行，所以左边这个盒子只需要往左边移动到相应位置，那么需要移动多少？

　　通过这个图我们可以看到只需要移动middle的宽度+右边留出来的100px。即👇

　　通过这三行代码，分两步，向左偏移100%，并且再偏移一个100px,我们就将左边这个盒子挪到了middle左边了。

　　接下来就是右边这栏，同理，我们只需要挪动盒子的宽度100px即可。

　　至此，我们可以说已经基本上完成了圣杯布局，我们可以通过拉伸或缩小窗口验证是否为我们想要的效果。

　　优化：

　　我们可以看到中间这栏是实现了自适应，但是还有一点小缺陷，就是当窗口过小的时候布局会受到影响。 只需要在body上设置最小宽度即可。

　　这样一个简单的圣杯布局就完成啦。

　　总结一下，圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过定位到相应位置。（是不是很简单！)

　　我们再来看看双飞翼布局的实现，首先也是写一下基本的html：

　　样式上也是需要向左浮动，前面的基本一致，现在的效果如下👇

　　然后不一样的是， 我们不使用相对定位，而是直接通过，将left栏移动到middle栏上，right栏也一样。

　　效果已经是三栏布局了，但是注意看此时的middle的内容被左右两栏遮住了（即看不到middle文本了）

　　因为左右两栏覆盖了middle栏的内容。此时应该可以想到，只要将middle栏设置padding即可将内容挤到中间可视区域了。

　　这里有个问题就是，如果直接在middle栏里面加padding,会导致整个布局乱套。

　　所以我们需要在middle栏里面再套一层div，那么现在的html就会变成这样：

　　我们在里面这层div上加padding,即👇

　　至此，我们就实现了双飞翼布局：

　　最后总结一下，二者的异同。

　　（1）布局类似，都是实现特定需求的三列布局。

　　（2）都使用了浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。

　　（1）实现方法的不同：

　　圣杯布局是通过搭建布局+使三列布局到一行上+相对定位调整位置。

　　双飞翼布局是通过+，没有使用相对定位。

　　（2）怎么处理两列的位置：

　　圣杯布局是给外部容器加，通过相对定位把两边定位出来。

　　双飞翼布局是靠在中间这层外面套一层加将内容挤出来中间。

　　以上即是我对圣杯布局和双飞翼布局的实现过程和总结，如有错误，欢迎指出~~

　　圣杯布局demo源码

　　双飞翼布局demo源码