深刻css佈局 (2) — 定位與浮動

時間 2019-11-29

標籤深刻 css 佈局定位浮動欄目 CSS 简体版

原文原文鏈接

深刻css佈局(2) — 定位與浮動

在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css佈局相關的知識才是css比較核心和重要的點。今天咱們來深刻學習一下css佈局相關的知識。css

上篇文章咱們講完了css佈局中盒模型和元素分類的相關知識，同時介紹了box-sizing和行框。這篇咱們繼續...html

1、定位與浮動

上篇咱們講解了不一樣類型元素的特色，咱們能夠隨意的排列組合他們來達到咱們想要的效果。可是他們都是基於一個二維平面的，若是咱們想在佈局中有遮擋，重疊之類的更豐富效果，咱們就須要使用到定位和浮動的相關知識。前端

1.1 文檔流

文檔流就是按照頁面元素書寫的順序，將頁面元素按從左到右，從上至下的通常順序進行排列。那麼也就能夠理解成咱們剛纔所說的一個二維平面的概念。vue

那麼若是我想要實現更豐富的效果，就須要脫離文檔流，在一個新的平面上去顯示，這樣咱們就能夠在屏幕上有多個平面疊加顯示的效果了，那麼這就是浮動和定位的工做了。css3

1.2 定位

定位容許你使用 position 屬性，將一個元素相對於他本身或者他的祖先元素甚至是瀏覽器窗口經過 top , left , right , bottom 屬性進行偏移。瀏覽器

根據 position 屬性的取值，元素能夠分爲靜態定位元素static（默認值）、相對定位元素relative、絕對定位元素absoute和固定定位元素fixed。微信

首先咱們拋開static這個默認值，由於他基本不屬於定位的範疇，由於元素默認就是static，他就至關因而依據文檔流顯示。markdown

當咱們使用定位時，須要position屬性和top,left,right,bottom這兩類屬性共同參與來決定一個元素的 定位類型 和 偏移量 。app

使用方法很簡單，這裏說下他們之間的區別:佈局

relative相對定位

元素根據其在當前文檔流所在位置做爲參考系，進行偏移。

定位以後原來元素在文檔流中的位置會被空出來，不會被其餘元素所佔據。

absolute絕對定位

元素會將其帶有position爲非static的祖先元素做爲參考系進行偏移。

若是祖先元素裏沒有帶有position爲非static的，則會以首屏做爲參考系。

定位後，原來在文檔流中佔據的位置，會被其餘元素所佔據。

fixed固定定位

根據當前可視區進行定位，因此當文檔流爲多屏可滾動時，fixed定位的元素會跟隨滾動而滾動。

跟absolute定位同樣，定位後，原來在文檔流中佔據的位置，會被其餘元素所佔據。

1.3 包含塊

包含塊就是個專有名詞，其實概念很簡單，這裏瞭解一下就好。

包含塊是一個矩形區域，當元素設置屬性的百分比的時候，好比width：50% 或者 top: 10%，其參考系就是他的包含塊。

大部分時候對於文檔流裏的元素，其包含塊指的都是其父元素的區域。

對於定位元素來講，相對定位元素包含塊也是其父元素區域；

絕對定位元素的包含塊是其帶有position爲非static的祖先元素區域。若是其沒有這樣的祖先元素的話其包含塊爲首屏顯示區域，這個區域也有個專有名詞叫作初級包含塊。

固定定位元素的包含塊就是當前可視區的區域。

1.4 浮動

浮動容許你將元素浮動起來，脫離文檔流向左或者向右移動。直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

雖然浮動也脫離文檔流顯示，可是與定位不一樣的是 inline 和 inline-block 的元素能夠識別這種因浮動而脫離的文檔流，從而不發生重疊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } .float { width: 40px; height: 40px; background: blue; float: left; } p{ display: inline-block; width: 100px; height: 100px; background: red; } </style>
</head>
<body>    
    <div class="float"></div>
    <p>LearnInPro  LearnInPro  LearnInPro</p>
</body>
</html>

咱們會發現p元素並無佔據掉浮動元素的位置，而後咱們將上面的代碼稍做修改，將p元素的display改成block咱們就會發現

雖然這樣p標籤佔據了float元素的位置，可是標籤裏面的文本則不會去佔據float元素的位置。

這個設定實際上是有些詭異的。另外說一句，在css歷史上浮動這個東西一開始被造出來是爲了實現文字圍繞圖片這種效果的而不是用來作佈局的，當時只有圖片能夠設置浮動效果，可是後來慢慢全部元素均可以浮動而且基於浮動有了本身的佈局體系，全部因爲歷史緣由相對來講浮動的規則是比較亂的小部分還有些詭異的。有些地方咱們記住就好。

咱們來具體看下浮動的規則：浮動元素會從最後一行最左側的空白位置開始浮動，如當前行沒法容納下本身寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另外一個浮動框的邊框爲止。咱們這裏舉兩個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> .float{ width: 30%; height: 40px; border: 1px solid black; float: left; } </style>
</head>
<body>
    <div class="float">flaot1</div>
    <div class="float" style="height: 60px;">flaot2</div>
    <div class="float">flaot3</div>
    <div class="float">flaot4</div>
    <!--<div class="float" style="width: 10px;">flaot5</div>-->
</body>
</html>

這裏float4在float3右側空白位置起始，發現當前行沒法容納下本身則垂直向下到下一行，向左移動，在碰到包含塊以前，碰到了float2的邊框，因而就會在float2的右邊框處中止浮動。

以後咱們將代碼稍做修改，把float5這行註釋刪掉，咱們會發現，一開始float5的起始位置就是在float4這行的右側空白區域，當前行可容納下本身，因而就停在了float4的右側。雖然第一行也就是float3這行右側空白區域也空着，能夠放得下float5，可是float5的起始位置並不會在第一行，因此最終即便第一行有位置能夠顯示下float5，它也不會在那裏顯示。

1.4 清除浮動

首先爲啥要清除浮動？

因爲浮動元素會脫離文檔流顯示，因此在浮動元素後面的塊級元素會默認佔據這些元素的位置，就會形成這些塊級元素會在浮動元素的下層顯示，出現浮動元素蓋住後面正常文檔流元素的效果，但這每每不是咱們想要的結果。

其做用是改變 使用清除浮動的這個元素 與 前一個聲明的浮動元素 之間的默認佈局規則，讓 使用清除浮動的這個元素 在新的一行中顯示。

如何清除浮動

clear屬性，其值爲left | right | both。

浮動元素或者非浮動元素的塊級元素均可以使用這個屬性來清除浮動（咱們以前說inline和inline-block元素能夠自動識別浮動，因此他們不須要清除浮動），他們的做用對象是前一個聲明的浮動元素。若是使用 clear:left | right 則是清除前一個float爲left或者right的元素的浮動，clear：both則是清除前一個浮動元素，不管它是向哪邊移動。那麼使用clear屬性的元素會在浮動元素的下方新開一行顯示。

清除浮動的特殊應用

清除浮動能夠解決父元素高度塌陷問題。當一個元素包裹了一些float元素的時候，因爲float元素脫離文檔流顯示，因此父元素沒法被這些元素撐開高度，致使父元素高度爲0。

那麼最經常使用的一種解決方案是：設置父元素的after僞元素的clear屬性 來讓其撐開父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix {
            background: gray;
            border: 1px solid black;
        }
        .float {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        .clearfix:after,
        .clearfix::after{
            content: " ";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="float">float</div>
    </div>
</body>
</html>

當咱們沒有設置clearfix的after僞元素時，會發現clearfix的高度爲0，只有邊框會顯示出來。咱們經過設置clearfix的after僞元素來讓咱們在不須要新增標籤的狀況下就能夠清除掉浮動，而且clearfix類還能夠複用。

注意點：

content和display屬性會將after僞元素渲染出來，加上clear: both實現一個真實標籤清除浮動的效果。

在通常瀏覽器中不設置visibility和height是沒有問題的，但爲了增長代碼健壯性和規範性，建議加上。

:after 和 ::after的區別：:after的寫法是css2的，能夠兼容到IE8，::after的寫法是css3中規定的，用以區分僞類(:hover)和僞元素(::before)。

定位與浮動的相關知識點就講的差很少了，下篇文章會去講下merge的一些問題 和 格式化上下文(formatting context) ，繼續把css佈局篇完成。

最後你以爲咱們的文章對你有幫助，歡迎關注咱們的 微信公衆號LearnInPro，在上面你能夠第一時間獲取到咱們的技術文章，而且你能夠隨時在上面向咱們提問，把你在學習前端過程當中所遇到的問題發給咱們。咱們天天都會按時回覆你們的每個問題，但願LearnInPro能夠伴隨你從入門到專家。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。