网页常见布局方式一：
float属性——使纵向排列的块级元素，横向排列
margin属性——设置两列之间的间距
一般包裹层中两个并排的div控制距离都在10~20之间
当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般使用紧邻后面的元素的清除浮动
而当整个父层mainbody来清除浮动（父包含块缩成一条），我们用第二种方法： overflow：hidden(隐藏属性，当设置隐藏属性是就不要设置高度值了）
1、 如果希望并排的两个div间又间距可对左浮动进行设置
#mainbody{width:100%;overflow:hidden;}
.left{width:800px;float:left;margin-right:20px;}
.left{width:140px;float:left;}
2、更加优化的另一个方法（为网站提速）
#mainbody{width:100%;overflow:hidden;}
.left{width:800px;float:left;}
.left{width:140px;float:right;}
当然这是只使用于横向两列布局，如果是三列以上就需要对其中的一个设置外边距margin的属性（因为浮动的特，在容器中一直沿着包裹层向左或者向右移）
例：width：100%；overflow：hidden；用于清除浮动（清除浮动时，只设置宽度不行，必须设置overflow：hidden；才能实现效果）
或clear：both；
原文：http://www.cnblogs.com/hq123/p/5988651.html