通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

两者本质

圣杯布局

• 首先把left、middle、right都放出来
• 给它们三个设置上float: left, 脱离文档流；
• 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
• left、right设置上各自的宽度
  middle设置width: 100%;

接下来比较重要了：

• 给left、middle、right设置position: relative;
• left设置 left: -leftWidth, right设置 right: -rightWidth;
• container设置padding: 0, rightWidth, 0, leftWidth;

因为不这样设置 会遮挡middle的内容

双飞翼布局

双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

• 首先把left、middle、right都放出来, middle中增加inner
• 给它们三个设置上float: left, 脱离文档流；
• 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
• left、right设置上各自的宽度
• middle设置width: 100%;
  接下来与圣杯布局不一样的地方：
• left设置 margin-left: -100%, right设置 right: -rightWidth;
• container设置padding: 0, rightWidth, 0, leftWidth;