三栏布局解决方案汇总

三栏布局解决方案
三栏布局，在开发中十分常见，也常作为面试题作为一个布局考点，大致上就是两边固定，中间自适应的一种布局方案，以下汇总出几种几种解决方案，供学习与参考。
Float流式布局

<style type=”text/css”>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>

<div class=”container”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”main”></div>
</div>
BFC三栏布局解决方案
// 上面流式布局中替代main的解决方案
height: 200px;
overflow: hidden;
background-color: green;

绝对定位
圣杯， 双飞翼解决方案
Table布局
Flex布局
grid网格布局解决方案（目前兼容性尚不大好）
学习总结：常见的三栏布局实现