双飞翼和圣杯布局区别可参考：https://www.cnblogs.com/imwtr/p/4441741.html
一、固定布局
二、自适应布局
宽度随着网页大小的改变而改变；
三、常见类型
1、两列布局：
1.1 左边宽度固定，右边宽度自适应（左边浮动，下一个元素就会占据位置，并排一行）
.main {/*外层的样式：父级元素的水平居中*/width: 95%;margin-left:auto;margin-right:auto;/* 左右居中 */}/*左边设置固定宽度以及左浮动（为了不占一行）*/.left {float: left;width: 200px;height: 600px;background: red;}/*右边设置自适应宽度，最小宽度，margin-left，把左边固定宽度的元素的位置留出来就好了*/.right {min-width: 400px; /* 最小宽度 */margin-left: 210px;//不设置margin，左边栏和右边栏会有重合部分height: 600px;background: blue;} html：
1.2、右边宽度固定，左边宽度自适应：左右都浮动（左边自适应元素设置外层div 100%宽度，这样会占一行，然后里层设置右边的margin，把右边元素位置空出来）
//左边父级设置100%宽度，左浮动.left-fa {width: 100%;//占一行float: left;}//左边子元素设置margin-right.left {margin-right: 310px;//把右边固定宽度的元素位置留出来height: 600px;background: red;}/*右边固定宽度的元素左浮动，和margin-left负的本身大小*/.right {width: 300px;height: 600px;background: yellow;float: left;margin-left: -300px; //设置本身宽度的负值，是为了和左边元素占一行，不设置就被挤在下一行}
2、三列布局
2.1 定位法：（左右边设置绝对定位，设置一个最外级div（给父级设置relative，相对最外层定位)）
.main {//最外层width: 95%;margin-left:auto;margin-right:auto;/* 左右居中 */height: 300px;*zoom: 1;position: relative;}/*左边固定元素定位*/.left{position: absolute;top: 0;left: 0;width: 200px;height: 100%;background-color: cyan;}/* 中间自适应，设置的margin左右距离为左右二边固定宽度元素的 大小*/.center-fa{width: 100%;height: 100%;}.center{height: 100%;min-width: 400px;margin-left: 210px;margin-right: 210px;background-color: chocolate;}.right{position: absolute;top: 0;right: 0;width: 200px;height: 100%;background-color: rgb(255, 0, 221);} html:
2.1 双飞翼布局（对比圣杯如何呢？？）：（三栏都浮动，中间自适应元素设置外层div 100%宽度，以防独占一行，里层需要设置左右固定二栏的margin宽度，把左右二栏的位置空出来；另外，三栏排成一排，左右二栏需要设置负margin自身宽度）
.main {width: 95%;margin-left:auto;margin-right:auto;/* 左右居中 */height: 300px;overflow: hidden;*zoom: 1;}.left{float: left;width: 200px;height: 100%;margin-right: -200px;/*负margin自身宽度，为了并排一行。不然下面的会一直被挤下去*/background-color: cyan;}.center-fa{float: left;width: 100%;height: 100%;}.center{height: 100%;min-width: 400px;margin-left: 210px;/*为了给左右二栏空出位置*/margin-right: 210px;background-color: chocolate;}.right{margin-left: -200px;/*负margin自身宽度，为了并排一行*/float: left;width: 200px;height: 100%;background-color: rgb(255, 0, 221);} html: