浅谈float与position在布局方面的使用

float（浮动） 有 left right  none 几个值

position 有 relative absolute fixed 几个值。

float:left(right)会与position:absolute产生矛盾，position:absolute会消除float:left(right)

但是position:relative会与float:left(right)协同工作，并且left:20px；是相对于该元素相接的float元素向右偏移20个像素。

文档流：元素在页面按照从左向右，从上向下的排版规则

脱离文档流：元素不按照排版规则，从左还是从右排版可控制，且其他元素会无视该元素(会重叠），有特殊的情况，比如float脱离文档流，文本不会无视float元素，position:absolute脱离文档流，所有元素会无视该元素。

position:relative的元素不会脱离文档流，但是它可以实现偏移表现为脱离文档流，

使用position:relative left:20px，元素相对left:0px向右移动20像素，原来的位置(left:0px)是在文档流中的,其他元素不会无视这个位置。