两者都是实现，两侧定宽，中间自适应的三列布局！！！
一. 圣杯布局
.left .right .middle 的父盒子为 .container
圣杯布局的特点：
-
给父盒子设置
padding：0 /.right's width / 0 /.left's width，这样的话，把 .middle 先float ，它就会自动占领 .container 中间的位置，它就到位了！！！ -
.left 和 .right 也都 float ，但因为 .middle 已经上去了，所以它俩就会在 .middle 的下面，要想办法把它俩升上去！！
-
就用上了
margin-left/margin-right : 负值 -
给 .left 设置
margin-left : -100%- margin 的百分比是相对于父元素计算的！！！ - 所以就是设置负值，就会升到上一行，然后从上一行的右边开始计算值！！！方便理解，设置了 -50% 进行对比！！！
margin-left : -100%
margin-left : -50%
-
给 .right 设置
margin-left : -自己的宽度 -
因为上面给父盒子设置了 padding ，所以想要它俩到位，还需要我们手动移一下，就用到了
绝对定位 relative！！！
二. 双飞翼布局
双飞翼特点：
- 双飞翼就不给 .container 设置 padding 了固定 .middle 的位置了 。
- 而是在 .middle 里面再放一个子盒子，在子盒子里放中间的内容。通过设置 子盒子 的 margin 来确定中间列的位置 ，注意要设置 .middle 的宽度为 100% 。占满整个！！
.left .right .middle > .inner
-
还是都 float 起来，然后 .middle 因为html结构在上面，且它宽度为 100% ，所以还是它在上面 ，.left .right 在下面一行 。
-
要把.left .right 它俩升上去，还是用
margin-left/margin-right : 负值- 但由于现在它俩父盒子的宽度变了，圣杯布局法，因为给 .container 设置了 padding ，所以它宽度就变小了。而现在是 100% ，所以 - .left `margin-left : -100%` - .right `margin-left : -自己的宽度` 会直接到位，就不需要再通过 relative 定位去移动了！！！ -
而通过给 .inner 设置
margin : 0 /.right's width / 0 /.left's width就也到位了！！
三. 总结
-
两者都是，通过把三者都浮动起来 float 。但由于 .middle 宽度较大，会把 .left .right 挤到下一行。
-
然后通过设置 .left 的
margin-left : -100%,.right 的margin-left : -自己的宽度把它俩升上去 -
区别就出来了
- 由于 margin 的百分比是按照父元素计算的！！ - 而两种方法的它俩的父盒子宽度不一样 ： - 双飞翼的父盒子为 100% ，所以可以直接到位 - 圣杯的父盒子由于设置了 padding ，所以还需要再借助relative定位，再次移动才能到位！！ -
至于中间的 .miidle
- 圣杯是直接给 .middle 设置了 padding 来确定中间列的位置 - 双飞翼是，在 .middle 里加了子盒子，通过子盒子的 margin 来确定位置 -
注意： 都需要给 .container 开启 BFC ，防止高度塌陷！！！
-
注意： 都需要给left、middle、right设置上 padding-bottom: 9999px; margin-bottom: -9999px;解决三列底部会参差不齐的问题！！！
