CSS之圣杯布局与双飞翼布局

#一、圣杯布局与双飞翼布局

首先我们需要知道两种布局的需求是什么。

需求都是实现如下的三列布局，（重点！！）

1、两侧内容宽度固定，中间内容宽度自适应

2、三栏布局，中间一栏最先加载、渲染出来

即便布局类似，二者还是有本质上的区别：

可以看到，圣杯布局和双飞翼布局最不同的点就是中间栏的区域不同。空口说也说不出个一二三，直接看实现过程👇

#二、圣杯布局的实现过程

首先写一下基本的html：

复制 <div class="header">header</div>
    <div class="content wrapper">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
复制代码

这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。

然后写一下基本的CSS，加上背景颜色和宽高方便查看：

基本的布局搭好之后，我们只需要将中间三个实现成我们需要的三栏布局就好了。

首先设置一下左右两栏的宽度，中间栏由于是自适应，所以宽度设置成100%。

复制.middle {
        width: 100%;
    }
    .left {
        width: 100px;
    }
    .right {
        width: 100px;
    }

然后就到了重点，我们需要在每一栏加上浮动向左，因为我们需要他们显示在同一行，但是这样会带来一个问题就是高度塌陷。如图：

此时我们有两种解决方案，

1、第一个就是在内容区域也就是三栏布局设置overflow:hidden，触发BFC撑开区域。

复制.content {
        overflow: hidden;
    }

解决如下：

2、第二个方法就是在底部footer区域清除浮动，解决高度塌陷：

复制.footer {
        clear: both;
    }

同样也能解决👇

解决完高度塌陷的问题，我们就需要想办法把左边的盒子移动上去。

首先设置middle栏的padding,让中间这一栏左右留出区域方便我们放进去。

复制.wrapper {
        padding-left: 100px;
        padding-right: 100px;
    }

此时我们其实只需要通过相对定位，他们现在可以看成是一行放不下挤成了2行，所以左边这个盒子只需要往左边移动到相应位置，那么需要移动多少？

通过这个图我们可以看到只需要移动middle的宽度+右边留出来的100px。即👇

复制position: relative;
margin-left: -100%;
right: 100px;

通过这三行代码，分两步，向左偏移100%，并且再偏移一个100px,我们就将左边这个盒子挪到了middle左边了。

接下来就是右边这栏，同理，我们只需要挪动盒子的宽度100px即可。

复制margin-right: -100px;

至此，我们可以说已经基本上完成了圣杯布局，我们可以通过拉伸或缩小窗口验证是否为我们想要的效果。

优化：

我们可以看到中间这栏是实现了自适应，但是还有一点小缺陷，就是当窗口过小的时候布局会受到影响。 只需要在body上设置最小宽度即可。

复制body {
        /* 设置最小宽度，防止挤压使中间内容消失 */
        min-width: 600px;
    }

这样一个简单的圣杯布局就完成啦。

总结一下，圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。（是不是很简单！)

#三、双飞翼布局的实现过程

我们再来看看双飞翼布局的实现，首先也是写一下基本的html：

复制<div class="header">header</div>
    <div class="main middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>

样式上也是需要向左浮动，前面的基本一致，现在的效果如下👇

然后不一样的是， 我们不使用相对定位，而是直接通过margin-left，将left栏移动到middle栏上，right栏也一样。

复制.left {
        margin-left: -100%;
    }
    .right {
        margin-left: -100px;
    }

效果已经是三栏布局了，但是注意看此时的middle的内容被左右两栏遮住了（即看不到middle文本了）

因为左右两栏覆盖了middle栏的内容。此时应该可以想到，只要将middle栏设置padding即可将内容挤到中间可视区域了。

这里有个问题就是，如果直接在middle栏里面加padding,会导致整个布局乱套。

所以我们需要在middle栏里面再套一层div，那么现在的html就会变成这样：

复制<div class="header">header</div>
    <div class="main middle">
        <div id="main-wrapper">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>

我们在里面这层div上加padding,即👇

复制.main #main-wrapper {
       padding-left: 100px;
       padding-right: 100px;
    }

至此，我们就实现了双飞翼布局：

#四、总结

最后总结一下，二者的异同。

#1、相同之处

（1）布局类似，都是实现特定需求的三列布局。

（2）都使用了float浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。

#2、不同之处

（1）实现方法的不同：

圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

双飞翼布局是通过float+margin，没有使用相对定位。

（2）怎么处理两列的位置：

圣杯布局是给外部容器加padding，通过相对定位把两边定位出来。

双飞翼布局是靠在中间这层外面套一层div加padding将内容挤出来中间。