本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前端的三栏布局
之前学习了两栏布局，然后又了解到还有个三栏布局，学习了一下，感觉和两栏布局差不多，就是在右边多了个固定宽度的盒子，它基本上都是两边定宽，中间是自适应。
下面我们就一起来了解一下吧。
下面全部的实现效果都是如下：
1.浮动+margin
注意这里的 DOM 结构，不是我们想象那样的左中右结构，而是左右中结构，主要是给左右设置了浮动之后，就会脱离文档流，在最后是正常的文档流就很容易使用 margin 来控制。
首先我们给 .left 和 .right都分别加上 margin: left; 和 margin: right;，然后给 .main 添加上 marign: 0 200px;，这样就把它两边的距离空出来了，最终实现了三栏布局。
<style>
.container div {
height: 200px;
}
.left {
float: left;
width: 100px;
background-color: orange;
}
.right {
float: right;
width: 100px;
background-color: orange;
}
.main {
margin: 0 100px;
background-color: pink;
}
</style>
<div class="container">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div class="main">中间内容</div>
</div>
2.浮动+BFC
这个方式和上面的差不多，只是把 margin: 0 200px; 换成了 overflow: hidden; 来开启了 BFC ，当然换成其他的方法来开启 BFC 也是可以的。具体的方法可以看看我之前的文档：BFC是什么？有什么作用？
<style>
.container div {
height: 200px;
}
.left {
float: left;
width: 100px;
background-color: orange;
}
.right {
float: right;
width: 100px;
background-color: orange;
}
.main {
/* 开启了 BFC */
overflow: hidden;
background-color: pink;
}
</style>
<div class="container">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div class="main">中间内容</div>
</div>
3.定位
这个方法也容易实现，在左右连个盒子上面设置了绝对定位，不过不要忘记了子绝父相，还要在 .container 上添加相对定位。
然后再利用 margin 让中间盒子把两遍的距离空出来。
<style>
.container {
position: relative;
}
.container div {
height: 200px;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 100px;
background-color: orange;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 100px;
background-color: orange;
}
.main {
margin: 0 100px;
background-color: pink;
}
</style>
<div class="container">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div class="main">中间内容</div>
</div>
4.flex
这个就是开启了 flex布局，也是非常简单的。
需要注意的是，这个的 DOM 结构是有点改变的，我们又恢复了左中右的结构，原因是开启了 flex 布局，容器里面的项目，就成主轴排列 (默认是水平)。
还有就是需要给自适应宽度，也就是咱们的 .main ，需要给它设置上 flex: 1;，以此来铺满剩余的空间。
<style>
.container {
display: flex;
}
.container div {
height: 200px;
}
.left {
width: 100px;
background-color: orange;
}
.right {
width: 100px;
background-color: orange;
}
.main {
flex: 1;
background-color: pink;
}
</style>
<div class="container">
<div class="left">左边内容</div>
<div class="main">中间内容</div>
<div class="right">右边内容</div>
</div>
5.圣杯布局
后面的这两个就比较复杂了，首先圣杯布局我们先要将所有的子盒子设置为浮动，然后手动给中间元素设置宽度为100%，再设置 margin 属性将左右盒子放置到中间盒子上；
此时我们就可以设置 margin 值，来将整个大盒子向左和向右偏移 100px。
最后用定位的方式，分别把左右两个子盒子移动到两侧。
<style>
.container {
margin: 0 100px;
}
.container div {
height: 200px;
}
.left {
position: relative;
left: -100px;
top: 0;
float: left;
margin-left: -100%;
width: 100px;
background-color: orange;
}
.right {
position: relative;
right: -100px;
top: 0;
float: left;
margin-left: -100px;
width: 100px;
background-color: orange;
}
.main {
float: left;
width: 100%;
background-color: pink;
}
</style>
<div class="container">
<div class="main">中间内容</div>
<div class="left">左边内容</div>
<div class="right">右边内容</div>
</div>
6.双飞翼布局
双飞翼和圣杯布局类似，但是不完全一样，我们需要将自适应宽度的那个盒子嵌套在一个大盒子里面，这里用 .main 代指大盒子，然后把 .main 盒子和那两个固定宽度的盒子均设置为浮动，之后手动给 .main 盒子设置宽度为100%，再给那固定了宽度的盒子设置 margin 属性将其放置到 .main 盒子上；
这里就不是像圣杯布局那样通过定位移动左右盒子了，而是直接将 .main 盒子内部的子盒子添加上 margin 属性，而设置的值就是左右盒子的宽度。
<style>
.container div {
height: 200px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
background-color: orange;
}
.right {
float: left;
margin-left: -100px;
width: 100px;
background-color: orange;
}
.main {
float: left;
width: 100%;
}
.main div {
margin: 0 100px;
background-color: pink;
}
</style>
<div class="container">
<div class="main">
<div>中间内容</div>
</div>
<div class="left">左边内容</div>
<div class="right">右边内容</div>
</div>
