横向两列布局

Posted 2020-08-15 尘埃

网页常见布局方式一：

     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；