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