三列布局是一种很常见的布局方式，我之前做这种布局经常用的是定位或者浮动来实现。现在讲讲圣杯布局和双飞翼布局。

双飞翼布局

我现在讲讲圣杯布局和双飞翼布局是如何实现的呢？

圣杯布局

附上代码

html部分

html部分 css部分

圣杯布局所使用的原理是利用大盒子的padding将中间的内容往里面挤，其实这也是用到了怪异盒子的知识点，pading-left和padding-right各往里挤，这样左右两部分的盒子就有了空间，然后就可以使用margin来将他们移上去。

双飞翼布局

html部分 css部分

双飞翼布局的核心思想是设置四个盒子，将主体盒子，左边和右边部分的盒子都进行浮动，这样他们就脱离了文档流。然后中间的盒子会吧左边和右边的盒子给挤下去，然后在给中间的盒子套一个盒子，使用margin和把盒子给缩进来。