深入理解css布局之定位與浮動

發(fā)布時間：2018-05-21 15:52:48 作者：佚名

我要評論

這篇文章主要介紹了css布局之定位與浮動的相關資料,需要的朋友可以參考下

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

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

一、定位與浮動

上篇我們講解了不同類型元素的特點，我們可以隨意的排列組合他們來達到我們想要的效果。但是他們都是基于一個二維平面的，如果我們想在布局中有遮擋，重疊之類的更豐富效果，我們就需要使用到定位和浮動的相關知識。

1.1 文檔流

文檔流就是按照頁面元素書寫的順序，將頁面元素按從左到右，從上至下的一般順序進行排列。那么也就可以理解成我們剛才所說的一個二維平面的概念。

那么如果我想要實現(xiàn)更豐富的效果，就需要脫離文檔流，在一個新的平面上去顯示，這樣我們就可以在屏幕上有多個平面疊加顯示的效果了，那么這就是浮動和定位的工作了。

1.2 定位

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

根據(jù) position 屬性的取值，元素可以分為靜態(tài)定位元素static（默認值）、相對定位元素relative、絕對定位元素absoute和固定定位元素fixed。

首先我們拋開static這個默認值，因為他基本不屬于定位的范疇，因為元素默認就是static，他就相當于是依據(jù)文檔流顯示。

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

使用方法很簡單，這里說下他們之間的區(qū)別:

relative相對定位
元素根據(jù)其在當前文檔流所在位置作為參考系，進行偏移。
定位之后原來元素在文檔流中的位置會被空出來，不會被其他元素所占據(jù)。
absolute絕對定位
元素會將其帶有position為非static的祖先元素作為參考系進行偏移。
如果祖先元素里沒有帶有position為非static的，則會以首屏作為參考系。
定位后，原來在文檔流中占據(jù)的位置，會被其他元素所占據(jù)。
fixed固定定位
根據(jù)當前可視區(qū)進行定位，所以當文檔流為多屏可滾動時，fixed定位的元素會跟隨滾動而滾動。
跟absolute定位一樣，定位后，原來在文檔流中占據(jù)的位置，會被其他元素所占據(jù)。

1.3 包含塊

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

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

大部分時候對于文檔流里的元素，其包含塊指的都是其父元素的區(qū)域。
對于定位元素來說，相對定位元素包含塊也是其父元素區(qū)域；
絕對定位元素的包含塊是其帶有position為非static的祖先元素區(qū)域。如果其沒有這樣的祖先元素的話其包含塊為首屏顯示區(qū)域，這個區(qū)域也有個專有名詞叫做初級包含塊。
固定定位元素的包含塊就是當前可視區(qū)的區(qū)域。

1.4 浮動

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

雖然浮動也脫離文檔流顯示，但是與定位不同的是 inline 和 inline-block 的元素可以識別這種因浮動而脫離的文檔流，從而不發(fā)生重疊。

<!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>

我們會發(fā)現(xiàn)p元素并沒有占據(jù)掉浮動元素的位置，然后我們將上面的代碼稍作修改，將p元素的display改為block我們就會發(fā)現(xiàn)

雖然這樣p標簽占據(jù)了float元素的位置，但是標簽里面的文本則不會去占據(jù)float元素的位置。

這個設定其實是有些詭異的。另外說一句，在css歷史上浮動這個東西一開始被造出來是為了實現(xiàn)文字圍繞圖片這種效果的而不是用來做布局的，當時只有圖片可以設置浮動效果，但是后來慢慢所有元素都可以浮動并且基于浮動有了自己的布局體系，所有由于歷史原因相對來說浮動的規(guī)則是比較亂的小部分還有些詭異的。有些地方我們記住就好。

我們來具體看下浮動的規(guī)則：浮動元素會從最后一行最左側的空白位置開始浮動，如當前行無法容納下自己寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另一個浮動框的邊框為止。我們這里舉兩個例子：

<!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右側空白位置起始，發(fā)現(xiàn)當前行無法容納下自己則垂直向下到下一行，向左移動，在碰到包含塊之前，碰到了float2的邊框，于是就會在float2的右邊框處停止浮動。

之后我們將代碼稍作修改，把float5這行注釋刪掉，我們會發(fā)現(xiàn)，一開始float5的起始位置就是在float4這行的右側空白區(qū)域，當前行可容納下自己，于是就停在了float4的右側。雖然第一行也就是float3這行右側空白區(qū)域也空著，可以放得下float5，但是float5的起始位置并不會在第一行，所以最終即使第一行有位置可以顯示下float5，它也不會在那里顯示。

1.4 清除浮動

首先為啥要清除浮動？

由于浮動元素會脫離文檔流顯示，所以在浮動元素后面的塊級元素會默認占據(jù)這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現(xiàn)浮動元素蓋住后面正常文檔流元素的效果，但這往往不是我們想要的結果。

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

如何清除浮動

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偽元素時，會發(fā)現(xiàn)clearfix的高度為0，只有邊框會顯示出來。我們通過設置clearfix的after偽元素來讓我們在不需要新增標簽的情況下就可以清除掉浮動，并且clearfix類還可以復用。

注意點：

content和display屬性會將after偽元素渲染出來，加上clear: both實現(xiàn)一個真實標簽清除浮動的效果。
在一般瀏覽器中不設置visibility和height是沒有問題的，但為了增加代碼健壯性和規(guī)范性，建議加上。
:after 和 ::after的區(qū)別：:after的寫法是css2的，可以兼容到IE8，::after的寫法是css3中規(guī)定的，用以區(qū)分偽類(:hover)和偽元素(::before)。

以上所述是小編給大家介紹的css布局之定位與浮動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！