CSS 布局经典问题初步整理
本文主要对 CSS布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox布局，等等。
CSS基础知识
下面几个入门教程不错：
幕课网 – HTML+CSS基础课程：偏基础，可以在线练习和预览
MDN – CSS入门教程: MDN的官方文档
学习 CSS布局：排版和配色特别舒服，简短但不深入，适合概览入门
CSS定位问题
主要就是经典的绝对定位，相对定位问题。
10个文档学布局：通过十个例子讲解布局，主要涉及相对布局，绝对布局，浮动。
百度前端学院笔记 –理解绝对定位：文章本身一般，几篇参考文献比较详细
HTML和CSS高级指南之二——定位详解（译文）：介绍浮动的使用，详细介绍定位的技巧，包括如何准确的给元素在 X轴、Y轴和 Z轴定位
三栏式布局
涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。
圣杯布局
圣杯：父盒子包含三个子盒子（左，中，右）
中间盒子的宽度设置为 width: 100%;独占一行；
使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
.left {margin-left:-100%;}把左边的盒子拉上去
.right {margin-left：-右边盒子宽度px;}把右边的盒子拉上去
父盒子设置左右的 padding来为左右盒子留位置；
对左右盒子使用相对布局来占据 padding的空白，避免中间盒子的内容被左右盒子覆盖；
<!--圣杯的 HTML结构 -->
<divclass="container"
<!--中间的 div必须写在最前面 -->
<divclass="middle"中间弹性区</div>
<divclass="left"左边栏</div>
<divclass="right"右边栏</div>
</div>
双飞翼布局
双飞翼：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。
中间盒子的宽度设置为 width: 100%;独占一行；
使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
在中间盒子里面再添加一个 div，然后对这个 div设置 margin-left和 margin-right来为左右盒子留位置；
<!--双飞翼的 HTML结构 -->
<divclass="container"
<!--中间的 div必须写在最前面 -->
<divclass="middle"
<divclass="middle-inner"中间弹性区</div>
</div>
<divclass="left"左边栏</div>
<divclass="right"右边栏</div>
</div>
圣杯和双飞翼异同
圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
两种方法基本思路都相同：首先让中间盒子 100%宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
主要区别在于如何使中间盒子的内容不被左右盒子遮挡：
圣杯布局的方法：设置父盒子的 padding值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding出来的空位；
双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin值来让出空位，而不用再调整左右盒子。
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。
利用浮动实现
