网页布局基础（2）－横向俩列布局

2019独角兽企业重金招聘Python工程师标准>>>

一、float属性

3个属性：left（左浮动） /  right（右浮动） /  none（不浮动）

特点：元素会左 / 右移，直至触碰容器为止。



就像容器边缘有磁铁吸引

*注意：设置了浮动的元素，依旧处于标准文档流中。

二、清除浮动影响的方法

     当元素设置浮动属性后,会对相邻的元素产生影响​。（相邻元素特指紧邻后面的元素）

1.clear属性：clear : both  （clear : left 或者 clear : float）
​​​                  ​​​​//   不清楚的情况下使用clear : both

2.同时设置width : 100% （或者固定宽度）+overflow : hidden ;

                 //​    紧邻元素使用方法1   ;  父级元素受影响使用方法2

三、横向俩列布局

方法：1.float属性 - 使纵向排列的块级元素，横向排列；

          2.margin属性 - 设置俩列之间的布局。



清除属性的注意点在不同情况下使用不同清除浮动的方法。

转载于:https://my.oschina.net/zhangyujian/blog/799714