圣杯布局和双飞翼布局

#前端7班+余愿

做双杯布局的原理和两栏布局的原理差不多，首先也是先把基本的div写出来

添加样式：

页面实现

这个时候，要实现两个侧边栏分别在main的左右两边，可以用浮动和负边距。

首先将两个侧边栏和main都浮动，这时候就会出现以下情况

因为content部分的侧边栏和main都浮动了，脱离了文档流，在页面上实现的效果挡住了尾部，而尾部的文字却围绕在浮动元素的周围。这时候就需要给父容器添加清除浮动。

尾部就出来了

这是再用上负边距，给侧边栏1设置margin-left:-100%和侧边栏2设置margin-left:100px。效果如下：

为什么侧边栏1设置的是100%，而侧边栏2设置的是100px呢。100%表示的是宽度移动父容器的100%，因为父容器的宽度是不一定的，设置为100%就可以根据父容器的宽度变化而变化。侧边栏2的100px，是因为侧边栏2的宽度为100px，如果设置为99px，则侧边栏2无法上到main的右边。

由图可以看出，两个侧边栏分别在main的两侧了，可是此时两个侧边栏都挡住了中间的main。

此时给包裹main和侧边栏的父容器content设置一个padding：0 100px；效果如下

再使用定位将侧边栏1放到左边，将侧边栏2放到右边。

效果如下，圣杯布局就出来了~

圣飞翼布局就是在main被两边的侧边栏被挡住时，解决方法不一样的布局方式。

在main被两边侧边栏挡住时，双杯布局用的方法是给content添加左右内边距，用相对定位使侧边栏分别靠左和靠右。圣飞翼布局的解决方式是，在main里面再加一个div.wrap，将主要内容放在wrap里面，这样就不需要再使用定位。

在main里加一个wrap，

添加样式

效果如下