圣杯布局
圣杯布局是典型的 CSS 布局问题，有着众多的解决方案。
圣杯布局是一种非常经典和常用的布局方式，其所指的是三列布局，中间宽度自适应，两边定宽；或者两列布局，主体宽度自适应，左边或右边定宽。
- 边栏应流动居中，定宽。
- 中间一栏 (主要内容) 在 HTML 源码中应该首先元素出现。
- 所有栏同高，忽略实际高度。
- 使用的 HTML 标记尽量少。
- 当页面内容不够充满页面时，页脚应“粘”在底部。
过程
<header>header</header>
<div class="container clearfix">
<div class="main">main</div> // main放在前面先渲染
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer<footer>
- 设置中间三个div向左浮动，使其排列在一行
- 设置footer元素清除浮动，阻止与上面的main部分重叠。
- 设置中间三个div的宽度，左右定宽，中间宽度自适应。
.container > div {
height: 10vh;
float: left;
}
.main {
width: 100%;
background-color: #5AEBF0;
}
.left {
width: 200px;
background-color: #F668E0;
}
.right {
width: 200px;
background-color: #F668A4;
}
1494083623x2890174022.png
- 主内容栏宽度变小，设置container的padding。
- left盒子上去，设置left的margin-left为-100%，。
.container {
padding-left: 200px;
}
.left {
width: 200px;
background-color: #F668E0;
margin-left: -100%;
}
1494084112x2890174022.png
由于 container 设置了内边距，因此中间栏看起来就处在了网页的中间，但左右两栏由于排在中间栏的后面，且因为空间不够被挤到了中间栏的下面
- left盒子移动到左边，使用相对定位，设置left属性为盒子宽度等量的负值。
.container > div {
height: 10vh;
float: left;
position: relative;
}
.left {
width: 200px;
background-color: #F668E0;
margin-left: -100%;
left: -200px; /* 或者使用 right: 200px;*/
}
1494084481x2890174022.png
- 最后，我们需要把右侧栏放上去，此时只需利用上面的原理把他放到 container 的右外边距的位置即可，我们需要再一次设置一个负外边距的值，它等于右侧栏的宽度
1494085959x2890174022.png
