圣杯布局、双飞翼布局、Flex布局和绝对定位布局

方法一：圣杯布局

1.设置基本样式

为了高度保持一致给left main right都加上min-height:130px。

2.圣杯布局是一种相对布局，首先设置父元素container的位置： 
　 

实现效果是左右分别空出200px和300px区域，效果如图：

3.将主体部分的三个子元素都设置左浮动

出现了如下情况，怎么办，别着急慢慢来：

4.设置main宽度为width:100%,让其单独占满一行

5.设置left和right 负的外边距

　　我们的目标是让left、main、right依次并排，但是上图中left和right都是位于下一行，这里的技巧就是使用负的margin-left: 
　　 
 
　　负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。关于负的margin的应用也是博大精深，这里肯定是不能详细介绍了。 
　　设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，因为被left遮住了），left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。 

6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

至此，我们完成了三列中间自适应的布局，也就是传说中的圣杯布局。完整的代码如下：

方法二：双飞翼布局

　　圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。 
　　他的HTML结构发生了变化： 
　　 

直接贴出代码，读者可以自行参透他们的异同：

　　双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。

想知道更多关于圣杯布局和双飞翼布局，请参考：

　　　圣杯布局和双飞翼布局的作用和区别 
　　　CSS布局 – 圣杯布局 & 双飞翼布局

方法三：Flex布局

　　Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 
　　任何一个容器都可以指定为 Flex 布局，所以Flex 布局将成为未来布局的首选方案。

　　对于Flex布局的一些具体语法实现，可参见阮一峰大神的Flex 布局教程：语法篇；网友 JailBreak 为Flex布局制作了 Demo，可以参考。

　　想了解Flex布局的具体实例可参见阮一峰大神的Flex 布局教程：实例篇；想直接查看Flex布局实例，你可以到直接到codepen查看Demo。 
　　 
接下来讲一下此实例的具体实现： 
1.首先将container块设置为一个Flex容器

　　那么container下属的main、left和right这三个子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 
　　 
2.对这三个项目做初始设置 
　　 

项目根据内容进行弹性布局：

 
3.通过order属性设置排列顺序

　　可以看出三个项目的排序方式不一样了，main排在了第一个，要让main在中间，left在左边，可以通过Flex容器下的项目的属性“order”属性来设置：

对于order属性：定义项目的排列顺序，越小越靠前，默认为0。

４.通过项目属性flex-grow设置main的放大比例，将空余的空间用main来填充，使三个项目不满一整行；默认为0，也就是对剩余空间不做处理。

5.通过项目属性flex-basis 设置left和right的固定宽度

这样就实现了我们的目标，是不是很简单？这就是flex布局的魅力。。。

6.最后，完整的代码如下：

方法四：绝对定位布局

　　绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 
　　 
　　提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

言归正传： 
　　绝对定位，就相当于万金油一样的存在，不论什么样的布局，使用绝对定位都能实现，所以对于具体的实现过程就不赘述，下面直接上代码，不懂的call我：

实现结果当然是一样的啦！