1.position + margin：
缺点：当浏览器的窗口过小时，可能会出现多层重叠现象。
HTML结构：
<div class='contain'>
<div class='left'></div>
<div class='right'></div>
<div class='main'></div>
</div>
注意：中间的div放在最后！！！
CSS样式：
.left,.right{
position: absolute;
height: 500px;
width: 200px;
}
.left{
left:0;
background-color: red;
}
.right{
right: 0;
background-color: green;
}
.main{
margin: 0 200px;
background-color: pink;
height: 500px;
}
2.float + margin：
缺点：当浏览器窗口缩小时，会导致元素放不下而换行。
HTML结构：
<div class='contain'>
<div class='left'></div>
<div class='right'></div>
<div class='main'></div>
</div>
注意：中间的div放在最后！！！
CSS样式：
.clear:after{content: '';
display: block;
clear:both;
}
.left{
float:left;
width:200px;
height: 500px;
background-color: red;
}
.right{
float:right;
width:200px;
height: 500px;
background-color: green;
}
.main{
height: 500px;
margin: 0 200px;
background-color: pink;
}
3.flex布局：
HTML结构：
<div class='contain'>
<div class='left'></div>
<div class='main'></div>
<div class='right'></div>
</div>
CSS样式：
.contain{
display: flex;
height: 500px;
}
.left{
width:200px;
background-color: red;
}
.right{
width: 200px;
background-color: green;
}
.main{
flex: 1;
background-color: pink;
margin: 0 20px;
}
4.table布局：
HTML结构：
<div class='contain'>
<div class='left'></div>
<div class='main'></div>
<div class='right'></div>
</div>
CSS样式：
.contain{
display: table;
width:100%;
height: 500px;
}
.contain>div{
display: table-cell;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: green;
}
.main{
background-color: pink;
}
5.grid网格布局：(注意兼容性)
HTML结构：
<div class='contain'>
<div class='left'></div>
<div class='main'></div>
<div class='right'></div>
</div>
CSS样式：
.contain{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:200px auto 200px;
}
.left{
background-color: red;
}
.right{
background-color: green;
}
.main{
background-color: pink;
}