css定位问题的记录

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

包裹性
包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。哦，举个例子吧，如下测试代码：

.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }
.abs { position:absolute; }

html：

<div class="div">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>无absolute</p>
</div>
<div class="div abs">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>absolute后</p>
</div>

结果