一、一列布局
关键代码：
{
width：960;
margin：0 auto；
}
代码：
二、二列布局
关键代码：
.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;}
注意：这种布局一定要保证固定宽度布局的高度>自适应宽度的布局，因为绝对定位：absolute会脱离文档流，无法撑开父元素。
绝对定位，相对于最近的定位的父元素或者html根进行定位。
四、混合布局
关键代码：
将一列布局，二列布局、三列布局混合使用
运行结果：
注意：footer里面应该加清除浮动的代码：“clear：both” 或者 “width：100%；overflow：hidden”；
浮动会影响紧邻设置浮动属性元素其后的元素，应该为被影响的元素清除浮动。
总结自慕课网教程：http://www.imooc.com/learn/57
浙公网安备 33010602011771号