tips：接下去会在github写博客，简书不再更新和修改文章，欢迎大家逛逛我的新博客点击查看 ，我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流😄。
圣杯布局
<div class="wrapper">
<div class="col main">main</div>
<div class="col left">left</div>
<div class="col right">right</div>
</div>
.wrapper {
padding: 0 120px 0 100px;
overflow: hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
background-color: red;
}
.left {
width: 100px;
margin-left: -100%;
left: -100px;
background-color: green;
}
.right {
width: 120px;
margin-left: -120px;
right: -120px;
background-color: blue;
}
缺点：圣杯布局有个问题，当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。
双飞翼布局
它与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。链接 ： 这篇文章一步步借图剖析，写得很好。
相似点：
1.给main设置width: 100%，占满窗口，从而自适应。
2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）
3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。
image
区别：
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局，以及对应的left和right值。
<div class="wrapper">
<div class="col main">
<div class="main-wrap">main</div>
</div>
<div class="col left">left</div>
<div class="col right">right</div>
</div>
.wrapper {
padding: 0;
overflow: hidden;
}
.col {
float: left;
}
.main {
width: 100%;
background-color: red;
}
.main-wrap {
margin: 0 120px 0 100px;
}
.left {
width: 100px;
margin-left: -100%;
background-color: green;
}
.right {
width: 120px;
margin-left: -120px;
background-color: blue;
}
flex布局
思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。
<div class="wrapper">
<div class="main">
这是中间
</div>
<div class="left">这是左侧</div>
<div class="right">这是右侧</div>
</div>
.wrapper{
display: flex;
}
.main{
background-color: red;
flex-grow: 1;
}
.left{
flex:0 1 100px;
background-color: blue;
order: -1;
}
.right{
flex:0 1 120px;
background-color: green;
order: 1;
}
缺点：兼容性。
