CSS经典布局--圣杯布局与双飞翼布局
圣杯为主体部分再加两个耳朵，鸟儿是身体再加两个翅膀，所以，圣杯布局与双飞翼布局，顾名思义，这两个布局针对的都是三列左右栏固定，中间栏边框自适应的网页布局。
下面来走近这两个经典布局案例叭~
圣杯布局
由于网页中需要优先对中间栏进行渲染，所以在html布局中，需要将main（主体部分）写在最前面
这样写的好处就是，在网页的显示过程中，可以优先看到网页的正文部分，而两边的导航信息的说明信息稍后显示，因为在我们看来，两边的优先级不如主体部分优先级高。
html主体部分：
一步一步来设置CSS样式
设置初始的div格式
清除浮动
在给主体三个部分设置了float左浮动属性后，中间三部分的父元素div发生塌陷，所以需要去清除浮动
设置main
目前结果：
使得main left right依次并排
为了使得三个部分排列在一行，需要给left和right设置相应的负的外边距
right的margin-left设置为-220pxt其含义为：在设置了left的CSS样式之后，绿色的div移动到了蓝色div的后面，所以设置绿色的div向左移动一个绿色div的宽度的长度，这样则使得绿色div位于页面的右面
设置后的结果：
解决内容覆盖问题
但是由于三个部分都脱离了标准流，所以导致设了margin-left值之后，导致main部分的内容被两侧divj所覆盖
为了解决内容的覆盖问题，则可以在父div盒子的 css样式添加相应的padding外边距属性值，将左右的padding设置为左右两个盒子的对应宽度，这样即可将内容全部显示在中间部分
由于container盒子包含了三个主体部分盒子，所以设置了padding值之后，三个元素开始往中间挤，所以需要进行下一步设置
将left 和right盒子相应的向左和向右移动相应的负的盒子宽度值，使得盒子相应的移动
最终实现结果
圣杯布局就完成啦~
双飞翼布局
双飞翼布局与圣杯布局相似，都是两边定宽，中间自适应的三列布局形式，两个布局不同的地方在于，为了使main的内容不被覆盖，在main的div中又加入了一个div
html部分代码
大部分css样式与圣杯布局相同
main内容覆盖问题的解决
双飞翼布局与圣杯布局所完成的界面大体是一样的，但是在解决main部分的文本覆盖问题中有了不一样的解决方法，圣杯布局中，给left与right盒子移动相应的距离，使得三个盒子可以依次排列且布满整个页面，而双飞翼布局中，在main盒子的内容部分加入一个新的盒子content，在解决覆盖问题时，只需要改变content盒子的左右边距即可，不需要对container盒子进行改动，这也使得right和left不用再进行left和right属性的再次设置
实现结果
实现结果与圣杯布局相同
两类经典布局的对比
双飞翼布局中，类选择器的使用比圣杯布局增加了一个，但是简化了代码，使得两侧盒子在设置为margin之后，不需要再对位置进行改动
