三栏布局
三栏布局 在网页布局中算是 比较长江的一种，比如淘宝等，诸多网站都是用的三栏布局
它是 两边元素固定，中间自适应，并且 中间的元素优先渲染
第一种：定位
也是比较粗暴的一种 定位 但本人不建议使用 布局容易混乱
第二种：浮动
结构
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>
</div>
body,html{
height: 100%;
padding:0;
margin: 0;
}
/*左边栏左浮动*/
.left{
float:left;
height:100%;
width:100px;
background:#ff69b4;
}
/*中间栏自适应*/
.main{
height:100%;
margin:0 200px 0 100px;
background: #659;
}
/*右边栏右浮动*/
.right{
float:right;
height:100%;
width:200px;
background:#ff69b4;
}
特点：
简单，兼容性好
当中间内容高于两侧时，两侧高度不会随中间内容变高而变高
flex布局
结构与上一种方式结构一样 （同上）
下面我就不写了
样式
.container{
display: flex;
}
.left{
width:200px;
background: red;
}
.main{
flex: 1;
background: blue;
}
.right{
width:200px;
background: red;
}
特点：
简单、优雅
未来发展趋势，实用
三栏高度统一
table布局
<div class="container">
<div class="left">left</div>
<div class="main">center</div>
<div class="right">right</div>
</div>
样式
.container{
display: table;
width:100%;
}
.container>div{
display: table-cell;
}
.left{
width: 100px;
background: red;
}
.main{
background: blue;
}
.right{
width: 200px;
background: red;
}
圣杯布局
<body>
<div class="wrap">
<div class="main"> 两边元素固定，中间自适应，并且 中间的元素优先渲染</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
样式
<style> .wrap{ padding: 0 300px 0 200px; } .main, .left, .right{ float: left; width: 100%; } .main{ background-color: #ccc; } .left{ background-color: #ffb; position: relative; width: 200px; left: -200px; margin-left: -100%; } .right{ background-color: #f65; position: relative; width: 300px; right: -300px; margin-left: -300px; } </style>
将wrap设置padding，是为了将left， 和right的位置预留出来，否则左右部分会覆盖在中间内容上。
重点：负边距
当我们给元素加上相反的负边距的时候，它会认为它前面的元素的宽度减少了这么多，而实际上前者的宽度并没有改变，最终的效果为：加负边距的元素浮在了它前面元素的上方
双飞翼布局（float)
<body>
<div class="wrap">
<div class="main">
<div class="content">两边元素固定，中间自适应，并且 中间的元素优先渲染
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
它由淘宝首创，和圣杯布局实现的效果几乎一样，核心也都是负边距的应用，只不过文档结构和样式略有区别。
<style> .main, .left, .right{ float: left; } .main{ background-color: #ccc; width: 100%; } .main .content{ margin-left: 200px; margin-right: 300px; } .left{ background-color: #ffb; width: 200px; margin-left: -100%; } .right{ background-color: #f65; width: 300px; margin-left: -300px; } </style>
中间部分加了一个div 用来放内容 ，当left 和 right 浮在它（div main）上面的时候 不至于覆盖住它的内容
