说一下浮动和定位的区别

779 阅读1分钟

1.浮动

浮动早期作用是图文环绕,现在是用于布局,让垂直的盒子变成垂直布局.如一个在左,一个在右.会依次排序.

1.1 float属性

left:左浮动
right:右浮动

1.2 浮动的特点

浮动的元素会脱离标准流
浮动的元素比标准流高出半个级别
浮动找浮动:下一个浮动元素会在上一个浮动元素后面左右浮动
浮动会受到上面元素边界的影响

2.定位

定位:是相对于父元素进行定位的两个盒子 ,两个盒子位置之间没有关系,两个盒子甚至可以重叠。

2.1 position属性

 position: static 静态定位
 position: relative  相对定位
 position: absolute  绝对定位
 position: fixed    固定定位
 

2.2特点

 相对定位特点
 1 需要配合方位属性来移动位置 
 2 想对于自身原来的位置进行移动
 3 在页面中占位置-没有脱标
 绝对定位特点
 1 需要配合方位属性来移动位置 
 2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,
   相对于最近一级带有定位的祖先元素移动位置. 
 3 在页面中不占位置-已经脱标
 固定定位特点
 1 需要配合方位属性来移动位置 
 2 相对于浏览器的可视区域进行移动位置 
 3 不占位置-脱标
 

2.3子绝父相

 子绝父相:
 子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.
 那父元素是相对定位,对网页的布局影响比较小.