三列布局：
1.利用float+overflow实现
左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应
.center{
height: 30px;
background: red;
overflow: hidden;
}
.left{
width: 100px;
height: 30px;
border: 1px solid #000;
float: left;
}
.right{
width: 100px;
height: 30px;
border: 1px solid #000;
float: right;
}
//自适应部分要放最后
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
overflow.png
2.用flex布局实现
左右两边定好宽度后，主要用flex:1来占满剩余空间从而实现中间自适应
.container{
width:100%;height:400px;border:1px solid red;
display:flex;
}
.left{
width:100px; height:100%;background:gray;
}
.middle{
width: auto;
height: 100%;
background: red;
flex:1;
}
.right{
height:100%;
width: 100px;
background:green;
}
<div class= "container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
flex.png
3.用Table布局格式实现
使用table不仅可以在实现页面自适应的部分，还可以用table-cell来实现对行锤值对齐
.container{
width:100%;height:400px;border:1px solid red;
display:table;
}
.left{
width:100px; height:100%;background:gray;
display:table-cell;
}
.middle{
width: auto;
height: 100%;
background: red;
display: table-cell;
}
.right{
width: 100px;
height:100%;
background:green;
display: table-cell;
}
<div class= "container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
table.png
4.float+margin实现三列布局
把左右两边的宽度固定然后左右浮动，中间自适应部分用margin：0 和 左右两边的宽度
左右两栏利用中间的margin挤出空间，左侧向左浮动，右侧向右浮动，中间不设置宽度，随着屏幕的缩小，左右两栏的宽度会保持不变，中间的宽度会减小。
.center{
height: 30px;
background: red;
margin: 0 100px;
}
.left{
width: 100px;
height: 30px;
float: left;
background-color: yellow;
}
.right{
width: 100px;
height: 30px;
float: right;
background-color: yellow;
}
//注意中间自适应的要放在最后面
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
float.png
5.定位absolute实现中间自适应
左右两栏设置为绝对定位，将脱离文档流，中间部分利用margin挤出左右两栏的空间，当窗口缩小时，左右两栏宽度不变，中间一栏的宽的减小。
给左右两边设置相对定位，并分别设置距离页面距离为0，中间自适应部分通过margin：0 左右宽度 来自适应
*{
margin: 0;
padding: 0;
}
.center{
height: 30px;
background: red;
margin: 0 100px;
}
.left,.right{
width: 100px;
height: 30px;
position: absolute;
background-color: blue;
}
.left{
left: 0;
}
.right{
right: 0;
}
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
6.Grid网格布局
高度由内容撑开，若设置了任意一栏的高度，则其余两栏的高度会随之变化。
主要是使用grid-template-columns这一属性时中间的盒子自适应，这一属性定位列属性，比如要定义三列就写3个数值，每个数值代表每一个项目的宽度，auto是自适应占满剩余空间
*{
margin: 0;
padding: 0;
}
.content{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px; /* 设置列数属性 */
}
.center{
background: red;
}
.left,.right{
background-color: blue;
}
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
grid.png
6.圣杯式布局
*{
margin: 0;
padding: 0;
}
.header, .footer {
border: 1px solid #333;
background: #ccc;
text-align: center;
}
.footer {
clear: both;
}
.container {
padding:0 220px 0 200px;
overflow: hidden;
}
.left, .middle, .right {
position: relative;
float: left;
min-height: 130px;
}
.middle {
width: 100%;
background: blue;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
<header class="header">header</header>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer class="footer">footer</footer>
圣杯.png
7.双飞翼布局（与圣杯类似）
*{
margin:0;
padding: 0;
}
.main>div{
float: left;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right{
width: 200px;
background: blue;
margin-left: -200px;
}
.middle{
width: 100%;
background: yellow;
}
.content{
margin-left: 200px;
margin-right: 200px;
}
<div class="main">
<div class="middle">
<div class="content">
中间
</div>
</div>
<div class="left">
左边
</div>
<div class="right">
右边
</div>
</div>
双飞.png
等高布局
伪等高之-负margin和padding
*{
margin:0;
padding: 0;
}
.parent{
position: relative;
overflow:hidden;
color: #efefef;
}
.center,
.left,
.right {
box-sizing: border-box;
float: left;
}
.center {
background-color: #2ECC71;
width: 60%;
}
.left {
width: 20%;
background-color: #1ABC9C;
}
.right {
width: 20%;
background-color: #3498DB;
}
.left,
.right,
.center {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<div class="layout parent">
<div class="left"><p>left</p></div>
<div class="center">
<p>我是中间部分的内容</p>
<p>我是中间部分的内容</p>
<p>我是中间部分的内容</p>
<p>我是中间部分的内容</p>
</div>
<div class="right"><p>right</p></div>
<div style="clear: both;">11111111111</div>
</div>
等高.png
