一：Flex三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {display: flex; }
.main {flex-grow: 1; height: 250px;background-color:gold;}
.left {order:-1; flex: 0 1 200px; margin-right: 25px; height: 250px;background-color:red;}
.right{ flex: 0 1 100px;margin-left: 25px;height:250px;background-color: purple;}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果如下
二：BFC三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left { float: left;height: 200px;width: 100px; margin-right: 20px; background-color: red; }
.right { width: 200px; height: 200px; float: right;margin-left: 20px; background-color: blue; }
.main { height: 200px; overflow: hidden; background-color: green; }
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
效果如下图；
三：绝对定位三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container { position: relative; }
.main {height: 300px; margin: 0 100px; background-color:purple; }
.left {position: absolute； width: 100px; height: 300px; left: 0; top: 0; background-color:springgreen; }
.right { position: absolute; width: 100px;height: 300px;background-color: blue;right: 0; top: 0; }
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果如下图
四：双飞翼三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content { float: left;width: 100%;}
.main { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green;}
.left { float: left; height: 200px; width: 100px;margin-left: -100%; background-color: red; }
.right {width: 200px;height: 200px; float: right； margin-left: -200px; background-color: blue;}
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
双飞翼布局是将一个网页分为左列，中列和右列三部分效果是：左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。
优点：（1）兼容性好，兼容若有主流浏览器
（2）可以实现内容的优先加载
实际布局中还有其他许多三栏布局形式。CSS世界浩瀚无穷！
