一、一列布局
关键代码：
{
width：960;
margin：0 auto；
}
代码：
运行结果：
分析：以上代码实现一列布局，头部占整个浏览器的100%，中部和底部利用 “定宽+margin" 实现居中。
二、二列布局
关键代码：
.left{ float:left; }
.right{ float:right;}
代码：
运行结果：
分析： 主要是通过左边的盒子左浮动：float：left 。右边的盒子右浮动：float：right 来实现的。最外面的一个盒子利用”定宽+margin“来是整个页面居中显示。
上面代码左右盒子宽度使用的是百分比，实现自适应，如果需要固定宽度，则将左右盒子的宽度设置为固定像素值。
三、三列布局
关键代码：
.left{float:left; width：33.33%；}
.middle{float:left；width：33.33%；}
.right{float:right；width：33.33%；}
运行结果：
分析：此布局为三列自适应布局，通过使用float和百分比宽度实现：左边盒子和中间盒子float：left；右边盒子：float：right；三个盒子的宽度都为33.33%；
左右边固定中间自适应的三列布局：
关键代码：
.left{ position:absolute; left:0; top:0;}
.middle{margin:0 xxpx 0 xxpx}
.right{position:absolute; top:0; right:0}
运行结果：
分析：如果希望有间隔，可以将中间的盒子改为 .miaddle{margin:0 310px 0 200px;}
四、混合布局
关键代码：
将一列布局，二列布局、三列布局混合使用
运行结果：
总结自慕课网教程：http://www.imooc.com/learn/57