解析什么是絕對定位，相對定位與浮動(dòng)

wawor4827 發(fā)布于2019-04-23 13:18 / 2404人閱讀

摘要：注意，絕對定位使元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣。相對定位相對定位，元素相對于它自己原來的位置進(jìn)行移動(dòng)。

在理解定位之前，先說一個(gè)概念，文檔普通流，就是元素標(biāo)簽正常在HTML里的順序，塊級元素從上至下排列，行內(nèi)元素從左到右排列。

絕對定位

絕對定位：absolute，元素相對于離它最近的已定位祖先元素進(jìn)行移動(dòng)，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（一般是HTML元素，也可能是畫布，這是由用戶的代理決定的）。注意，絕對定位使元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。

如下圖是正常放置的三個(gè)div，

如果將div2設(shè)置為絕對定位，會(huì)發(fā)現(xiàn)它會(huì)相對于HTML定位，因?yàn)闆]有已經(jīng)定位的祖先元素，且原來的位置被div3補(bǔ)上了。

相對定位

相對定位：relative，元素相對于它自己原來的位置進(jìn)行移動(dòng)。注意，相對定位使元素仍然占據(jù)原來的位置。

如下圖，如果將div2設(shè)置為相對定位，它會(huì)相對自己原來的位置移動(dòng)，且會(huì)發(fā)現(xiàn)它原來的位置仍然占據(jù)著

浮動(dòng)

浮動(dòng)：float，浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含的元素邊框或另一個(gè)浮動(dòng)元素的邊框?yàn)橹埂Ｗ⒁猓?dòng)的元素不在文檔的普通流中，所以文檔的普通流的其他元素表現(xiàn)得就像浮動(dòng)元素不存在一樣。

如下圖，將第二個(gè)div設(shè)置為float:right，它會(huì)跑到文檔的右邊

? ? ? ??

如果將div2設(shè)置為float:left，它會(huì)到文檔的左邊，也就是位置不變，并且脫離文檔流，div3補(bǔ)上來，但我們會(huì)發(fā)現(xiàn)文字還是原處，這就是浮動(dòng)和絕對定位的區(qū)別了。浮動(dòng)會(huì)以某種方式將浮動(dòng)元素從文檔的正常流中刪除，并把元素向左或向右浮動(dòng)，該元素還是會(huì)影響布局，如果將div2浮動(dòng)，div3確實(shí)占據(jù)了div2的位置，所以說浮動(dòng)元素脫離了文檔流，但div3中的文字沒跟上來，這是為了避免div2將div3里的文字覆蓋了，這就是浮動(dòng)的目的，所以說浮動(dòng)元素影響了布局；而絕對定位是將元素徹底從文檔流刪除，該元素再也不會(huì)影響其他元素的布局了，如果對div2絕對定位的，div3包括文字都會(huì)補(bǔ)上來被div2覆蓋。

由于浮動(dòng)會(huì)使元素脫離正常的文檔流，所以無法撐開父級元素（父級元素沒設(shè)置高度），導(dǎo)致父級元素在視覺上沒包圍浮動(dòng)元素（高度塌陷），所以我們要清除浮動(dòng)，通常是兩類，一是利用clear屬性，二是觸發(fā)浮動(dòng)元素的父元素的BFC（塊級格式化上下文）

看下面例子，外層div沒有被撐開

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠標(biāo)劃過更改圖片路徑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.給父級元素設(shè)置高度，但一般寫頁面高度都是不固定的。
#wrapper{
    height:100px;
}
2.給父級元素設(shè)置overflow:hidden或overflow:auto,zoom:1是為了瀏覽器的兼容性（IE大家都懂的），這種方法要注意溢出的元素。
#wrapper{
    overflow:hidden;
    zoom:1;
}
3.給父級設(shè)置浮動(dòng)，這種方法適用于本來父級就需要浮動(dòng)的，如果父級不需要浮動(dòng)，影響布局，還是沒解決根本問題。
#wrapper{
    float:left;
}
4.在浮動(dòng)元素后面加個(gè)空元素,clear:both，這種方法加了無用的html元素，代碼不夠簡潔，后期維護(hù)不便
<div id="clear">div>
#clear{
    clear:both;
}
5.利用父級的偽元素:after,推薦使用，兼容性好，萬能方法。
#wrapper:after{
        content: "";如果有內(nèi)容就寫，沒有就空，
        display: block;或者display:inline-block;
        clear: both;
        這三項(xiàng)是必須條件，其他都是可選項(xiàng)，視情況而定
    }
#wrapper{
        zoom:1;兼容IE
    }

在網(wǎng)頁主要布局時(shí):after偽元素方法應(yīng)該為常用清理浮動(dòng)方式；在小模塊如ul里使用overflow:hidden;（留意可能產(chǎn)生的隱藏溢出元素問題）；如果本身就是浮動(dòng)元素則可自動(dòng)清除內(nèi)部浮動(dòng)，無需格外處理；正文中使用鄰接元素清理之前的浮動(dòng)。最后可以使用相對完美的:after偽元素方法清理浮動(dòng)。