共计 577 个字符，预计需要花费 2 分钟才能阅读完成。
三栏布局解决方案
三栏布局，在开发中十分常见，也常作为面试题作为一个布局考点，大致上就是两边固定，中间自适应的一种布局方案，以下汇总出几种几种解决方案，供学习与参考。
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 网格布局解决方案（目前兼容性尚不大好）
学习总结：常见的三栏布局实现
正文完
