1.两列自适应宽度：
body{margin: 0;padding: 0;}/清除默认样式/
.left{width: 20%; height: 500px; background: red; float: left;}
.right{width: 80%; height: 500px; background: blue; float: right;}
两列自适应布局：会随着浏览器窗口宽度改变。width：百分比 ；loat，用的少，一般使用的是固定宽度的两列布局
2.固定宽度的两列布局：
body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width: 200px; height: 500px; background: red; float: left;}
.right{width: 600px; height: 500px; background: blue; float: right;}
固定宽度的两列布局：给他们加个固定宽度的父元素盒子
3.三列布局：
1、三列完全自适应宽度：①3个宽度为百分比；②第一个div的浮动：float:left；第二个div的浮动：float:left；第三个div的浮动：float:right.
2、两边固定、中间自适应的三列布局：①两边宽度输入固定值，中间宽度去掉；中间自适应。需要两边用绝对定位absolute
三列布局，左右固定宽带，中间自适应。不能使用浮动，要使用绝对定位
body{margin: 0;padding: 0;}
.left{width: 200px; height: 500px; background:#ccc; position: absolute; left: 0; top: 0; }
.mid{ height: 500px; background: gray; }
.right{width: 200px; height: 500px; background:#ddd; position: absolute; right: 0; top: 0; }

还可以修改中间div的margin来设置列间距：
.mid{ height: 500px; background: gray; margin: 0 210px;}
4混合布局：.
body{margin: 0;padding: 0;}
.top{height: 100px;background: blue;}
.main{height: 400px;width: 800px;margin: 0 auto;}
.left{height: 400px;width: 200px;background: red;float: left;}
.right{height: 400px;width: 600px;background: yellow;float: right;}
.foot{height: 100px;width: 800px; background: blue;margin: 0 auto;}