前言
相信很多同学在面试的时候遇到过三栏布局的问题，一般面试题会让你尽可能多的写出三栏布局的方法，本篇小记对三栏布局的一些主流方法，做一些总结和分析。不正之处，欢迎指点！
正文
1.绝对定位法
html如下：
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
css如下：
* {
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.container{
position: relative;
height: 100%;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: red;
}
.center{
position: absolute;
top: 0;
left: 300px;
right: 300px;
height: 100%;
background: green;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
background: blue;
}
分析：
缺点：
1.当设置中间区域center的宽度存在最小宽度时，元素会发生重叠效果（如图1-1）；
2.当浏览器宽度无限缩小时，中间区域会消失，右侧区域会与左侧区域发生重叠，右侧覆盖左侧（如图1-2）；
3.不同浏览器最小宽度下显示的层叠效果也有差异（如图1-3）；
（图1-1）
（图1-2）
（图1-3）
2.浮动布局
浮动方法1
html如下：
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css如下：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.left{
float: left;
width: 300px;
height: 100%;
background: red;
}
.center{
margin: 0 300px;
height: 100%;
background: green;
}
.right{
float: right;
width: 300px;
height: 100%;
background: blue;
}
分析：
注意HTML结构，这是较为简单的布局，左侧左浮动，右侧右浮动，中间流式自适应
缺点
1.不同浏览器最小宽度下显示的层叠效果也有差异（如图2-1）
（图2-1）
浮动方法2
html如下：
<div class="right"></div>
<div class="container">
<div class="left"></div>
<div class="center"></div>
</div>
css如下：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
margin-right: 300px;
}
.left {
float: left;
width: 300px;
height: 100%;
background: red;
}
.center {
margin-left: 300px;
min-width: 200px;
height: 100%;
background: green;
}
.right {
float: right;
width: 300px;
height: 100%;
background: blue;
}
分析：
采用两栏布局思路，注意HTML结构。
（1）先将右侧元素右浮动，左侧元素和中间元素用container包住作 “流式布局”，因为块元素div默认会占满整个容器宽度，设置container的margin-right: 300px给右侧元素留出空间；
（2）左侧左浮动；右侧继续使用 “流式布局” 思想，center元素不设置宽度，则块元素 center 默认占满整个容器宽度，并且设置margin-left: 300px给左侧元素留出空间；
缺点
1.当浏览器宽度无限缩小时，左侧元素会覆盖右侧元素，部分浏览器中间自适应元素会消失（即使中间元素设置了最小宽度）（如图2-2）。
2.不同浏览器最小宽度下显示的层叠效果也有差异（如图2-3）；
3.查看不同浏览器的差异，Edge和火狐浏览器布局完全错乱
（如图2-2）
（如图2-3）
3.圣杯布局
html如下：
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css如下：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
margin: 0 300px;
height: 100%;
}
.center {
float: left;
width: 100%;
height: 100%;
background: green;
}
.left {
float: left;
margin-left: -100%;
position: relative;
left: -300px;
width: 300px;
height: 100%;
background: red;
}
.right {
float: left;
margin-left: -300px;
position: relative;
right: -300px;
width: 300px;
height: 100%;
background: blue;
}
分析
(1)首先设置 container 左右外边距，左侧元素与右侧元素的空间留出
(2)中间元素设置宽度100%，占满设置外边距的容器
(3)左侧元素设置float: left; margin-left： -100%;（这个-100%指的是父元素的整体宽度），那么left元素将会从container的起始位置开始排布，再设置position: relative; left: -300px;, 在原有位置再向左位移300px
(4)右侧思路同上，设置right左浮动，位移 -300px让出原有占有的位置，使得right元素的右侧与container元素的右侧重合，再右移300px
缺点
1.浏览器宽度无限缩小，测试的四大浏览器中，只有opera浏览器右侧元素消失，其他浏览器排布会错乱（如图3-1）
（如图3-1）
4.双飞翼布局
html如下：
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
css如下：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container{
float: left;
width: 100%;
height: 100%;
}
.center{
margin: 0 300px;
height: 100%;
background: green;
}
.left{
float: left;
margin-left: -100%;
width: 300px;
height: 100%;
background: red;
}
.right{
float: left;
margin-left: -300px;
width: 300px;
height: 100%;
background: blue;
}
分析
(1)浮动container占满整个容器，内部设置center外边距，center默认占满剩下空间
(2)左侧左浮动，设置margin-left: -100%;释放原有占位空间，使得left上移至container起始位置
(3)右侧元素亦然，设置margin-left: -300px;释放原有占位空间，使得right上移，right元素右侧与container右侧融合
（如图4-1）
5.Flex布局
html如下：
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
css如下：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
height: 100%;
}
.left {
/* flex-shrink : 默认值是 1,表示空间不足允许收缩。设置为0，空间不足也不允许收缩 */
flex-shrink: 0;
width: 300px;
height: 100%;
background: red;
}
.center {
flex: 1;
background: green;
}
.right {
flex-shrink: 0;
width: 300px;
height: 100%;
background: blue;
}
分析：
(1)使用弹性盒子模型进行布局，左右定宽，中间自适应只需要设置 flex: 1;
(2) flex属性是flex-grow, flex-shrink 和flex-basis的简写，默认值为 0 1 auto。后两个属性可选
(3)不设置 flex-shrink: 0左侧元素与右侧元素会发生部分重叠，中间元素会消失
(4)设置 flex-shrink: 0，当浏览器宽度无限缩小时，中间元素消失，左侧右侧元素不会重叠，浏览器横向会出现滑动条（如图3-1）；
（图5-1）
综上所述： 在三栏布局中，弹性盒子布局方式相对较为稳定，但Flex存在兼容性问题，使用时请注意。
掘金首次发文，若有遗误，恳请指点，感谢！
