absolute包裹性
float是個帶有方位的display:inline-block屬性，absolute也是個inline-block化屬性。
在一個空div中添加一張圖片，可以看到圖片位居div左側，而此時div的長度為100%
現在我們給div添加position:absolute; padding:5px; 發現div的寬度變窄了并且包裹在圖片四周，這時div的高和寬是自適應，會隨著圖片的大小變化而變化，absolute具有包裹性，同樣的float 也具有包裹性
當把position：absolute；修改為float：left；發現效果和absolute是一樣的
absolute與float的包裹性等同于inline-block屬性，不同的是float具有方向性，而inline-block是水平排列
<style type="text/css">
.abs{
background: #ADADAD;
padding: 5px;
position: absolute;
}
</style>
absolute致使父元素的高度塌陷
絕對定位的元素脫離了文檔流（不占據之前的空間），而浮動元素依舊在文檔流中浮動（依然占據之前空間）
當我們給空div添加一張圖片，只給div設置padding：20px；然后給圖片設置position：absolute；會發現div的高度只有padding這20px，并沒有根據圖片的高度自適應，absolute使圖片脫離文檔流，使它在div中不占據空間，所以父元素div的高度發生了塌陷，同樣的我試了下將圖片的position：absolute；屬性設置為float：left；發現具有同樣的特性致使父元素div的高度塌陷。
對于float導致的父元素div塌陷，我們根據圖片大小給父元素div設置了一個高度大小 從而再次使得div包裹圖片
但是存在缺點，就是這個高度是固定的，如果我們想添加多個圖片，多的使得圖片產生自動換行顯示，那么這個高度又需要修改，這里有一個方法就是讓div高度自適應它們的高度，刪除原先的父元素div固定height，給父類元素div設置屬性overflow：hidden；
可以看到div自動適應高度
<style type="text/css">
.abs{
background: #ADADAD;
padding: 20px;
overflow: hidden;
}
div img{
float: left;
}
</style>
absolute跟隨性
給元素設置position：absolute；是元素具有跟隨性，例如在同一個div中，存放三張圖片，都不設置任何屬性的時候，他們水平排列著。
給第二張圖片設置一個絕對定位（position：absolute；）屬性可以發現，第三張圖片緊靠在第一張圖片后面，而第二張圖片漂浮到了第三張圖片上面（第二張圖片脫離了文檔流，并且不占空間），并且還是緊靠在第一張圖片后面，這就是絕對定位的跟隨性
<style type="text/css">
.qq{
width: 200px;
background: #adadad;
}
.close{
width: 50px;
position: absolute;
}
.wx{
width: 200px;
background: #ADADAD;
}
</style>
absolute的無依賴性
absolute的無依賴性，就是不依賴relative的限制來進行定位 首先先演示下父類元素設置relative下的定位，首先要給父類元素設置relative，子元素使用absolute 配合left，top進行定位，這里的left和top根據父類元素進行定位
.box{
position: relative;
}
.qq{
width: 300px;
background: #adadad;
}
.close{
width: 50px;
position: absolute;
left: 250px;
top: 0;
}
這種方法給右上角圖標進行定位的缺點是要有relative來限制absolute，如果不給absolute的父元素添加relative，那么absolute的元素就會根據body進行定位，當圖片改變大小的時候，右上角圖片就需要重新定位。比如當把圖片變小，右上角的圖片就顯示在了偏右的位置，小圖片依舊保持在left：250px；的位置，這就需要重新給小圖片進行定位。
如果使用margin配合absolute進行小圖片的定位，就可以脫離父級元素relative的限制，實現無依賴定位，同樣是上面的例子，現在取消父級元素relative的屬性，使用margin進行定位
.qq{
width: 200px;
background: #adadad;
}
.close{
width: 50px;
position: absolute;
margin-left:-50px ;
margin-top: 0;
}
使用margin和absolute配合進行定位，無論圖片怎么改變大小，小圖標始終定位在企鵝的右上角，不會偏離位置。
absolute的容器拉伸特性
absolute具有拉伸容器大小的特性，例如要實現一個距右邊距200px的容器，可以設置容器屬性position：absolute；left：0；top：0；right：200px；
這里容器沒有設置高度，就使用一張圖片撐開它
absolute不但可以拉伸容器，也可以拉伸內部元素，如果內部元素設置固定的長高，絕對定位是不能拉伸它的，當內部元素設置為百分比時，內部元素會隨著外部容器的拉伸而拉伸。
.box{
position: absolute;
left: 0;
top: 0;
right: 200px;
background: aquamarine;
}
.pic{
width: 30%; /* 圖片設置百分比*/
}
