解析什么是絕對定位，相對定位與浮動

wawor4827 發布于2019-04-23 13:18 / 2398人閱讀

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

在理解定位之前，先說一個概念，文檔普通流，就是元素標簽正常在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偽元素方法清理浮動。

云服務器 GPU云服務器相對定位-絕對定位相對定位絕對定位浮動定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1707.html

容易忽略的七個CSS知識點

摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...

chanthuang 2019-08-02 16:16 評論0 收藏0
容易忽略的七個CSS知識點

摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...

elina 2019-08-29 18:47 評論0 收藏0
前端入門4-CSS屬性樣式表

摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規則層疊算法等之后，那么該來學習的也就是都支持哪些屬性樣式表了。本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入...

hss01248 2019-04-23 13:14 評論0 收藏0
css基礎

摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區別聯系：它們都能讓元素不可見區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；vi...

JinB 2019-08-30 14:21 評論0 收藏0
前端面試題 -- HTML+CSS

摘要：內核原為，現為內核，等。但盒子的大小由這幾部分決定是一個屬性，與盒子模型有著密切聯系。前言貌似又到了一年一度跑路跳槽的時刻，由于個人的一些原因最近也參加了很多面試，發現有很多基礎性的東西掌握程度還是不夠，故此想總結一下最近面試遇到的問題以及個人認為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關注如果文章中有出現紕漏、錯誤之處...

shiina 2019-08-30 15:56 評論0 收藏0