本次我们将探讨的布局是平时项目中常见的几种情况，具体描述如下：
三栏布局
1.左右宽度固定，中间自适应（推荐使用flex或者calc布局因为代码简单，问题少）
2.上下高度固定，中间自适应
3.中间宽度固定，左右自适应
两栏布局
1.左宽度固定，右自适应
2.右宽度固定，左自适应
3.上高度固定，下自适应
4.下高度固定，上自适应
一、左右宽度固定，中间自适应
这种左右宽度固定中间自适应的情况最多出现的地方就是移动端标题栏的自适应效果。如图：返回和更多按钮的宽度一般情况是固定的，标题框的宽度一般是自适应的。要做到这种效果，一般有三种方法①float布局②absolute绝对定位③flex布局。推荐使用第三种flex布局。
1.float布局
缺点 :浮动是脱离文档流的，有些时候需要清除浮动，需要很好的处理浮动
优点 :兼容性比较好
left
right
浮动 ： center--center--center--
2.position：absolute布局
缺点 :该布局脱离文档流，所以子元素也必须脱离文档流，因此可使用性比较差
优点 :快捷，比较不容易出问题
left
浮动 ： center--center--center--
right
3.flex布局
思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）
left
浮动 ： center--center--center--
right
4.对中间的宽度进行calc计算
三个元素都向左浮动，左右定宽，中间的对其进行计算，让100%宽度减去左右宽度，即为中间宽度。
left
浮动 ： center--center--center--
right
5.双飞翼布局
目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。
#main
#left
#right
6.圣杯布局
main
圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。
圣杯布局和双飞翼的区别：圣杯布局是整体使用了一个container（上例的wrapper），将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分。
二、上下高度固定中间自适应
参考文件地址
1.absolute布局:
上中下都设置属性absolute，跟左中右布局差不多，但是要注意的要设置html和body的高度。center的要设置top和bottom的值，左中右设置margin就可以了
top
0987
buttom
2.flex布局
和左中右布局原理一样只是方向是竖直的。
top
buttom