两栏布局
左侧定宽，右侧自适应
1、右侧设置绝对定位将其从文档流中删除
//左侧
width:200px;
//右侧
position:absolute;
left:200px;
2、浮动法
不利于页面优化，右侧主要内容后加载
//左侧
float:left;
width:200px;
//右侧
无需设置
3、margin负值法
三栏布局
两边固定宽度，中间随浏览器自适应的布局
1、利用绝对定位
父元素设置position: relative；依此写main、left、right；main设置左右margin值为左右div宽度，right、left均设置position: absolute； top: 0; width: XX; 以及分别right: 0；left: 0
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container {
position: relative;
}
.main {
margin: 0 120px;
}
.left {
position: absolute;
width: 120px;
left: 0;
top: 0;
}
.right {
position: absolute;
width: 120px;
right: 0;
top: 0;
}
</style>
2、浮动法
依此写left、right、main；left设置float: left; left: 0; width: xx；right设置float: right; right: 0; width: xx；
main设置左右margin值为左右div宽度，或者形成BFC，因为BFC区域不会与浮动元素重叠
缺点：主要内容模块无法最先加载，当页面中内容较多时会影响用户体验
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div> ## main放最后
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
width: 200px;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
}
## 或者 触发BFC，BFC区域不会与浮动元素重叠
.main {
overflow: hidden;
}
</style>
3、双飞翼布局（利用浮动并且main先渲染，margin负值法）
出自淘宝前端UED团队，它将内容比作鸟的身体，左右比作双翼，所以叫作双飞翼
原理：内容div里再嵌套一个div，全部向左浮动，内容div的margin为左右div预留位置，左右div只设置margin负值即可实现。与圣杯布局相比，少了position:relative，多了一个div。
考点是margin的负值：margin 的left， top， right， bottom设置负值的分别作用
- margin-left 和 margin-top 会使元素向左和向上移动
- margin-right 和 margin-bottom 会使自身在布局中所占的位置减少， 使右边的元素或下边的元素向自身移动
<div class='content'>## main外包一层div
<div class='main'></div>
</div>
<div class='left'></div>
<div class='right'></div>
<style>
.content{
float:left;
width:100%;
}
.main{
margin-left:200px;## 左侧固定宽度
margin-right:100px;## 右侧固定宽度
}
.left{
float:left;
width:200px;
margin-left:-100%;##回到上一行
}
.right{
float:left;
width:100px;
margin-left:-100px;##right的宽度
}
</style>
4、圣杯布局
圣杯是曾经用来接耶稣的血，所以被基督徒看作圣物，圣杯流传几千年了，好像到现在也没找到圣杯（西班牙疑似发现了，暂且不讨论），毕竟流传几千年了寻找起来比较困难，所以常常用它来比喻难以寻找的事物。三栏布局在web设计中，有很多解决方案但是每种方案都有缺点，所以业界对于完美解决三栏布局的方案称为圣杯布局。
原理：设置内容、左、右全部往左浮动，父div的margin留出间距来，以放左、右div；然后在左、右通过margin-left和相对定位移动到要求位置。
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container{## 给左右侧预留宽度
margin-left:220px;
margin-right:120px;
}
.main{
width:100%;
float:left;
}
.left{
float:left;
width:200px;
margin-left:-100%;##回到上一行 但紧挨main
position:relative;
left:-120px;
}
.right{
float:left;
width:100px;
margin-left:-100px;
position:relative;
left:120px;
}
<style>
5、flex布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
}
.main {
flex-grow: 1;
}
.left {
order: -1;
flex: 0 1 200px;
}
.right {
flex: 0 1 100px;
}
</style>
