CSS常见布局（9） | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前言
闲言少叙，直奔主题。
圣杯布局
其实我还真是第一次听说圣杯布局这种称呼，看了下这个名字的由来，貌似和布局并没有什么关系，圣杯布局倒是挺常见的三栏式布局。两边顶宽，中间自适应的三栏布局。
这个布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变。可以适应浏览器的宽度变化使用百分比设置宽度再合适不过，所以我们要将中间子元素的宽度设置为 100%，左边和右边的子元素设置为固定的宽度。
我们就来实现一下这样的布局：
HTML 文件就很普通：
这里我们要注意的是，中间栏要在放在文档流前面以优先渲染。
给出每个子元素的样式
然后我们写 CSS，我们现将其三个元素的宽度和高度设置好，然后都设置为 `float:left`:
使子元素在同一行显示
我们可以看出，现在三个子元素是在一排显示的，因为我们给中间的子元素设置的宽度是 100%，并且中间的子元素在文档流的最前面，最先被渲染。
那么我们要使得三个元素在同一排显示。接下来我们要将 .left 和 .right 向上提。实际上我们是使用 margin-left 为 负值来实现的，我们将 .left 的 margin-left 设置为 -100%（负的中间子元素的宽度），这样，左边的元素就会被“提升”到上一层。
然后就是右边子元素了，只需要设置 margin-left 设置为负的自身的宽度。
使得中间子元素不被遮盖
从上一张截图显示中显示中间的子元素被遮挡了，所以说我们要解决这个问题，要怎么解决呢？嗯... 只要使得中间的子元素显示的宽度刚好为左边元素和右边元素显示中间的宽度就可以。同时我们还必须保证是使用的半分比的布局方式。
这样的话有一种方式可以即使中间的宽度减少，又可以使中间的宽度仍然使用 100%，那就是设置父元素的 padding 值，将父元素的 padding-left 设置为左边子元素的宽度，将父元素的 padding-right 设置为右边子元素的宽度。
