圣杯布局和双飞翼布局的原理

这种经典三列布局在网页布局中非常常见，主要区域分为三栏，左右固定，中间自适应，而且在页面渲染的时候，尽可能优先渲染中间主要部分。关于这种布局，最早产生于西方，后来传到中国，扩展成了双飞翼布局。

布局的重点有两点：

1、左右栏固定，中间栏自适应。
2、优先渲染中间栏部分。

圣杯布局

1. html结构

<div class="container">
    <div class="main">
        main
    div>
    <div class="left">
        left
    div>
    <div class="right">
        right
    div>
div>

html渲染是从上到下的，所以要保证main被优先渲染，就需要将main的位置放到前面。
2. CSS结构分析
1、基本样式

.container{
	background-color: #ccc;
}
.main,.left,.right{
	min-height: 200px;
}
.main{
    width: 100%;
    background-color: red;
}
.left{
    width: 100px;
    background-color: blue;
}
.right{
    width: 150px;
    background-color: green;
}

2、可以看到，标准流布局之后是这样从上而下的样子，使用浮动来让盒子脱离标准流

.main,.left,.right{
	float: left;
}
.container{
    /*清除浮动带来的高度塌陷*/
    overflow:hidden;
}

效果，是由三行变成了两行，原因是一行放不下，因为main的宽度是父容器的100%.

3、使用margin-left将左右盒子拉至应该在的位置，注意：margin值的百分比是相对父容器的百分比，所以我们让左盒子的margin-left: -100%; 右盒子的margin-left: -右盒子的宽度即可

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

可以看到，左右栏已经拉到了指定位置，但是有一个问题，就是遮挡住了中间栏main里面的内容。

4、给父容器设置padding值来让main的宽度值变小，给左右栏留出足够的位置

.container{
    padding: 0 150px 0 100px;
}

效果如下：

使用padding后，因为父容器没有设置宽度，所以内容区域width变小了，main的宽度就小了，两边留出了足够的位置，但是浮动不能越过父容器的padding区域，所以我们还需要用相对位置来移动左右栏的位置。

最终效果如下：

5、合并CSS代码后如下：

.container{
    background-color: #ccc;
    overflow:hidden;
    padding: 0 150px 0 100px;
}
.main,.left,.right{
    min-height: 200px;
    float: left;
    position: relative;
}
.main{
    width: 100%;
    background-color: red;

}
.left{
    width: 100px;
    background-color: blue;
    margin-left: -100%;
    left: -100px;
}
.right{
    width: 150px;
    background-color: green;
    margin-left: -150px;
    right: -150px;
}

3、 问题
以上代码就是标准的圣杯布局的原理，但是代码有点啰嗦，而且在浏览器窗口变窄到一定程度之后就会有问题，如下图：

可以看到，布局全都乱掉了，原因是：因为左右盒子设置了相对定位，所以当左右盒子应该在的位置发生重叠时，一行放不下了，就会换行，造成布局混乱，有两种解决办法：

1、给父容器设置最小宽度，这个最小宽度的计算为：left盒子宽度*2 + right盒子宽度
2、使用双飞翼布局

双飞翼布局

主要是不同是给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题。

1、html结构

<div class="container">
    <div class="main">
        <div class="main-content">
        	main
        div>
    div>
    <div class="left">
    	left
    div>
    <div class="right">
    	right
    div>
div>

2、css结构

.container{
	overflow: hidden;
}
.main,.left,.right{
    min-height: 200px;
    float: left;
}
.main{
    background-color: red;
    width: 100%;
    min-height: 220px;
}
.left{
    width: 100px;
    background-color: blue;
    margin-left: -100%;
}
.right{
    width: 150px;
    background-color: green;
    margin-left: -150px;
}
.main-content{
    background-color: yellow;
    margin: 0 150px 0 100px;
    height: 200px;
}

效果如下：

3、其他方案
这种布局除了这种典型的三栏布局，还可以引申至2栏，其他的等等。另外，实现布局的方式也是多种做样，还可以使用弹性布局flex或栅格布局grid来实现，但是兼容性没有这种以上两种方式好。

这边为了解决高度塌陷问题采取的办法不是最好的，因为设置的了父容器的overflow:hidden;如果后面有元素需要使用定位，用负值的margin时，就不能显示了。所以我们改进一下：
然后给父容器加上这个类

4、注意
上面所有样式中的有关高度height和min-height都是为了展示效果加上的，实际中是子元素自动撑高的。