详解css中relative，absolute，float用法

我们在使用css布局的时候，经常出现布局突然兵荒马乱的时候，导致这些状况出现的原因一般都是 position的absolute，relative和float这些属性使用不当导致的，下面是我对这些属性的一些理解，有错欢迎指出，大家共同进步哈

relative：

相对定位，此属性保留对象在文档流中的位置，后面的对象不侵占或覆盖该对象原来的位置，可通过top，right，bottom，left属性设定自己的新位置，这些属性值取值于该元素的正常位置，可自由设置这四个属性偏移到新位置而不对文档流中的其他位置产生任何影响（过几天补图~）

absolute：

绝对定位，该属性值会将当前对象拖出文档流，后面的对象会占有该对象原有的位置，元素的位置通过top，right，bottom，left属性进行规定，是相对于除static（注意：一般元素默认的定位都是static）定位的第一个元素进行定位。

float：

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留，常用3种清除浮动的方式；

-在使用float元素的父元素结束之前增加一个H:0，W:0 且有clear：both样式的div，缺点是：使dom结构变得更复杂，增加了无意义的标签;

-在使用float元素的父元素样式添加overflow：auto，使用zoom：1用于兼容ie7;

-在使用float元素的父元素对象添加after伪对象清除浮动

.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}