关于圣杯布局和双飞翼布局的思路和细节

今天晚上从网上资源学习了圣杯布局和双飞翼布局。因为之前一段时间对CSS的布局有过比较系统的学习，所以对这两个布局模式理解起来还是较为简单。

学习和使用行业精英总结出来并在行内广泛使用的方法（或者说框架）是简单的事情，但是学的过程还是要从其根源进行理解、分析，有助于拓展自己的思维，进而更深入地学习、理解、运用CSS，避免形成拿来主义的习惯。

总结起来，圣杯布局和双飞翼布局的构造思路如下：

1. 主栏需要先渲染，所以在文档结构中相对边栏须放在第一位，按照流动布局，主栏（100%）在第一行，两个侧栏（定宽）分别在第二、三行。

2. 如果只使用用float布局，分两种情况：

      （1）主栏正常流动布局，居中，两个侧栏float提不到第一行来：

       （2）主栏、侧栏都float，相当于是按既定顺序排列，主栏不能放到中间去。

         ——float方法pass!

2. float布局对文档顺序有依赖，absolut不存在。因此，可使用双absolute方法（主栏正常流动布局，外边距与侧栏宽度相等；两个侧栏一左一右absolute布局，定宽）。但这个方      法存在窗口缩小层重叠现象（参考张鑫旭老师博客中的解释），即窗口缩小到一定尺寸，两个侧栏互相重叠。

         ——absolute方法可行，但不好!

3.  那么还有其它方法能够把左、右侧栏从下一行提上来呢——负margin方法登场！

      左边栏margin:-100%是相对父容器的，右边栏margin:-200px（举例）是相对一个定值，即它自身宽度。

      注意main栏仍要设置float，这样后面的左边栏div右边栏div才能跟着浮动上来，否则它们不管负margin多少都还是在下一行！

4. 后面的步骤就是圣杯布局和双飞翼布局的区别，简单说就是圣杯布局是左右栏相对自身relative移开；双飞翼布局是在主栏中加了个div，设置margin以腾出被侧栏覆盖的部分。

      圣杯布局和双飞翼布局是解决之道！

核心一：因为主栏要先在网页中渲染，所以结构中放在第一位，布局要按照这个前提来；

核心二：凡是流动布局的div，它之后的div都要换行，用float和负margin都不能移动上来，因此主div要设置float。