论浮动与定位的区别

一.
浮动：相对于父元素浮动的两个盒子，两个盒子之间的位置是有影响的，不可以重叠，如果同样是左浮得话，会依次排序。

1.float属性：

left-左浮动

right-右浮动

none-不浮动

2.清除float的方法：

属性-常用–clear:both;

clear:left;

clear:right;

3.特点:

元素会左移，或右移，直到触碰到容器为止。

设置了浮动的元素，仍旧处于标准文档流中 意味着它会占据标准文档流中的空间,对周围的元素产生影响。

当元素没有设置宽度，而设置了浮动属性，元素的宽度随内容的变化而变化

当元素设置浮动属性后，会对相邻的元素产生影响， 相邻元素特指紧邻后面的元素

二.
定位：同样是相对于父元素进行定位的两个盒子 ，两个盒子位置之间没有关系，两个盒子甚至可以重叠。

1.position属性

拥有三种定位形式:静态定位 相对定位 绝对定位

2.4个属性值:

static(默认静态定位)

relative（相对定位）

absolute(绝对定位)

fixed(绝对定位)

3.相对定位

特点:
相对于自身原有位置进行偏移

仍处于标准文档流中

随即拥有偏移属性和z-index属性

4.绝对定位

特点:

建立了以包含快为基准的定位

完全脱离了标准文档流

随即拥有偏移属性和z-index属性