css中absolute的认识
css中的BFC（块及格式化上下文）已经是家喻户晓，今天我就简单谈谈我对其中的一个成员absolute的认识。
absolute属于块级格式化上下，其具有包裹性，破坏性，而这点和float是有同样的作用的。同时在top,right,bottom,left的作用下， 其可以瞬时定位。
1.先说一下它的包裹性
当父级div设置样式为absolute,其将具有包裹性，根据内部内容的大小来确定自身的大小，如下图所示：
图一
图二
图一是父级div未设置absolute，可以看出图一仍然块状显示，宽度100%，而图二父级div在设置position:absolute属性之后，具有包裹性，此时不在块状显示，而是将内部图片紧紧包裹住，底部留白是因为文字与图片基线对齐的原因。
2.破坏性
关于absolute的破坏性，如果父级div在不设置relative等position属性的话，在不同时设置top、left,或者bottom、right等两个属性的话，img默认还会受到父级的影响，同时自身不再属于父级，就相当于漂浮在父级元素之上了，就像下图：
图三
图四
当元素脱离文档流的时候，在父级元素不设置relative的情况下，此元素已经不再占用当前父级的空间，当父级宽度一定的情况下，该元素宽度超出父级元素不会隐藏，即使父级元素设置overflow：hidden的情况下。
3.absolute的使用
(1)使用absolute来清除浮动
我们知道BFC具有清除浮动的作用，而absolute同样也具有同样的作用，当absolute同时存在的时候，float浮动将会失去作用，效果如下：
图五
图六
代码如图五所示，当将absolute注释的时候，此时图片如我们预期一样在左上角显示。当图片设置absolute时，图片脱离文档流不在具有浮动的效果了，此时图片将会跟随文字显示，文字居中显示，自然图片将会跟随文字显示。当图片设置left或者right的时候，此时图片才不会受到父级的影响，才是真正的脱离文档流。
(2)巧用absolute来定位图标
图七
如图七所示，我们让商品也中免预约位于图片左上角，传统的是让父级标签position:relative,而我们是让图标position：absolute，然后根据设计图的要求调整图标的margin值就可以了，这样就不用担心父级在重构的时候删除父级的relative属性，而导致图标飞到其他位置，这样写更加健壮，利于维护。
(3)图片居中显示
图八
图九
如上所示，当块状元素尺寸确定，被拉伸，同时margin：auto的时候，此时，图片就可以达到居中效果，兼容性IE8+。absolute和width同时存在的时候，width的作用要大于拉伸效果。
元素height百分比要想起作用，必须让父级容器的height不为auto而在绝对定位下，即使父级容器的height为auto，只要容器是绝对定位拉伸形成的，那么子级容器就支持height的百分比形式。
个人见解，欢迎指正。
