absolute包裹性
float是個帶有方位的display:inline-block屬性唯袄，absolute也是個inline-block化屬性。
在一個空div中添加一張圖片，可以看到圖片位居div左側(cè)嫂沉，而此時div的長度為100%
現(xiàn)在我們給div添加position:absolute; padding:5px; 發(fā)現(xiàn)div的寬度變窄了并且包裹在圖片四周，這時div的高和寬是自適應，會隨著圖片的大小變化而變化庙曙，absolute具有包裹性，同樣的float 也具有包裹性
當把position：absolute浩淘；修改為float：left捌朴；發(fā)現(xiàn)效果和absolute是一樣的
absolute與float的包裹性等同于inline-block屬性吴攒，不同的是float具有方向性，而inline-block是水平排列
<style type="text/css">
.abs{
background: #ADADAD;
padding: 5px;
position: absolute;
}
</style>
absolute致使父元素的高度塌陷
絕對定位的元素脫離了文檔流（不占據(jù)之前的空間）砂蔽，而浮動元素依舊在文檔流中浮動（依然占據(jù)之前空間）
當我們給空div添加一張圖片洼怔，只給div設置padding：20px；然后給圖片設置position：absolute左驾；會發(fā)現(xiàn)div的高度只有padding這20px镣隶，并沒有根據(jù)圖片的高度自適應，absolute使圖片脫離文檔流什荣，使它在div中不占據(jù)空間汁蝶，所以父元素div的高度發(fā)生了塌陷，同樣的我試了下將圖片的position：absolute煤率；屬性設置為float：left秘车；發(fā)現(xiàn)具有同樣的特性致使父元素div的高度塌陷。
對于float導致的父元素div塌陷桅锄，我們根據(jù)圖片大小給父元素div設置了一個高度大小 從而再次使得div包裹圖片
但是存在缺點琉雳，就是這個高度是固定的，如果我們想添加多個圖片友瘤，多的使得圖片產(chǎn)生自動換行顯示翠肘，那么這個高度又需要修改，這里有一個方法就是讓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蝇摸；）屬性可以發(fā)現(xiàn)婶肩，第三張圖片緊靠在第一張圖片后面，而第二張圖片漂浮到了第三張圖片上面（第二張圖片脫離了文檔流貌夕，并且不占空間）律歼，并且還是緊靠在第一張圖片后面，這就是絕對定位的跟隨性
<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根據(jù)父類元素進行定位
.box{
position: relative;
}
.qq{
width: 300px;
background: #adadad;
}
.close{
width: 50px;
position: absolute;
left: 250px;
top: 0;
}
這種方法給右上角圖標進行定位的缺點是要有relative來限制absolute离唐，如果不給absolute的父元素添加relative，那么absolute的元素就會根據(jù)body進行定位问窃，當圖片改變大小的時候亥鬓，右上角圖片就需要重新定位。比如當把圖片變小域庇，右上角的圖片就顯示在了偏右的位置嵌戈，小圖片依舊保持在left：250px；的位置听皿，這就需要重新給小圖片進行定位熟呛。
如果使用margin配合absolute進行小圖片的定位，就可以脫離父級元素relative的限制尉姨，實現(xiàn)無依賴定位庵朝，同樣是上面的例子，現(xiàn)在取消父級元素relative的屬性又厉，使用margin進行定位
.qq{
width: 200px;
background: #adadad;
}
.close{
width: 50px;
position: absolute;
margin-left:-50px ;
margin-top: 0;
}
使用margin和absolute配合進行定位九府，無論圖片怎么改變大小，小圖標始終定位在企鵝的右上角覆致，不會偏離位置侄旬。
absolute的容器拉伸特性
absolute具有拉伸容器大小的特性，例如要實現(xiàn)一個距右邊距200px的容器煌妈，可以設置容器屬性position：absolute儡羔；left：0；top：0璧诵；right：200px笔链；
這里容器沒有設置高度，就使用一張圖片撐開它
absolute不但可以拉伸容器腮猖，也可以拉伸內(nèi)部元素，如果內(nèi)部元素設置固定的長高赞枕，絕對定位是不能拉伸它的澈缺，當內(nèi)部元素設置為百分比時，內(nèi)部元素會隨著外部容器的拉伸而拉伸炕婶。
.box{
position: absolute;
left: 0;
top: 0;
right: 200px;
background: aquamarine;
}
.pic{
width: 30%; /* 圖片設置百分比*/
}
