详解圣杯布局的原理

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

布局的重点有两点：
1、左右栏固定，中间栏自适应。
2、优先渲染中间栏部分。

圣杯布局

下面我们来看结构：
一、html结构

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

html渲染是从上到下的，所以要保证main被优先渲染，就需要将main的位置放到前面。

二、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;
}

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;
}

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

可以看到，布局全都乱掉了，原因是：因为左右盒子设置了相对定位，所以当左右盒子应该在的位置发生重叠时，一行放不下了，就会换行，造成布局混乱，有种解决办法就是给父容器设置最小宽度，这个最小宽度的计算为：left盒子宽度*2 + right盒子宽度。

**文章是笔者分享的学习笔记，若你觉得可以、还行、过得去、甚至不太差的话，可以“推荐”一下的哦。就此谢过!**