解析什么是绝对定位，相对定位与浮动
在理解定位之前，先說一個概念，文檔普通流，就是元素標簽正常在HTML里的順序，塊級元素從上至下排列，行內元素從左到右排列。
絕對定
絕對定位：absolute，元素相對于離它最近的已定位祖先元素進行移動，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（一般是HTML元素，也可能是畫布，這是由用戶的代理決定的）。注意，絕對定位使元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
如下圖是正常放置的三個div，
如果將div2設置為絕對定位，會發現它會相對于HTML定位，因為沒有已經定位的祖先元素，且原來的位置被div3補上了。
相對定位
相對定位：relative，元素相對于它自己原來的位置進行移動。注意，相對定位使元素仍然占據原來的位置。
如下圖，如果將div2設置為相對定位，它會相對自己原來的位置移動，且會發現它原來的位置仍然占據著
?
?
浮動
浮動：float，浮動的元素可以向左或向右移動，直到它的外邊緣碰到包含的元素邊框或另一個浮動元素的邊框為止。注意，浮動的元素不在文檔的普通流中，所以文檔的普通流的其他元素表現得就像浮動元素不存在一樣。
如下圖，將第二個div設置為float:right，它會跑到文檔的右邊
? ? ? ??
如果將div2設置為float:left，它會到文檔的左邊，也就是位置不變，并且脫離文檔流，div3補上來，但我們會發現文字還是原處，這就是浮動和絕對定位的區別了。浮動會以某種方式將浮動元素從文檔的正常流中刪除，并把元素向左或向右浮動，該元素還是會影響布局，如果將div2浮動，div3確實占據了div2的位置，所以說浮動元素脫離了文檔流，但div3中的文字沒跟上來，這是為了避免div2將div3里的文字覆蓋了，這就是浮動的目的，所以說浮動元素影響了布局；而絕對定位是將元素徹底從文檔流刪除，該元素再也不會影響其他元素的布局了，如果對div2絕對定位的，div3包括文字都會補上來被div2覆蓋。
?
由于浮動會使元素脫離正常的文檔流，所以無法撐開父級元素（父級元素沒設置高度），導致父級元素在視覺上沒包圍浮動元素（高度塌陷），所以我們要清除浮動，通常是兩類，一是利用clear屬性，二是觸發浮動元素的父元素的BFC（塊級格式化上下文）
看下面例子，外層div沒有被撐開
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鼠標劃過更改圖片路徑</title> </head> <body><div id="wrapper" style="border:1px solid red;"><div style="float:left;width:50px;height:50px;background:black;"></div></div> </body> </html>解決辦法如下：
1.給父級元素設置高度，但一般寫頁面高度都是不固定的。 #wrapper{height:100px; } 2.給父級元素設置overflow:hidden或overflow:auto,zoom:1是為了瀏覽器的兼容性（IE大家都懂的），這種方法要注意溢出的元素。 #wrapper{overflow:hidden;zoom:1; } 3.給父級設置浮動，這種方法適用于本來父級就需要浮動的，如果父級不需要浮動，影響布局，還是沒解決根本問題。 #wrapper{float:left; } 4.在浮動元素后面加個空元素,clear:both，這種方法加了無用的html元素，代碼不夠簡潔，后期維護不便 <div id="clear"></div> #clear{clear:both; } 5.利用父級的偽元素:after,推薦使用，兼容性好，萬能方法。 #wrapper:after{content: "";如果有內容就寫，沒有就空，display: block;或者display:inline-block;clear: both;這三項是必須條件，其他都是可選項，視情況而定} #wrapper{zoom:1;兼容IE}在網頁主要布局時:after偽元素方法應該為常用清理浮動方式；在小模塊如ul里使用overflow:hidden;（留意可能產生的隱藏溢出元素問題）；如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。最后可以使用相對完美的:after偽元素方法清理浮動。
?
更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的解析什么是绝对定位，相对定位与浮动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css的再深入7（更新中···）
- 下一篇： 解决安卓字体偏移：页面整体缩放