深入理解css布局之定位與浮動(dòng)

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

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

在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。

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

一、定位與浮動(dòng)

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

1.1 文檔流

文檔流就是按照頁(yè)面元素書(shū)寫(xiě)的順序，將頁(yè)面元素按從左到右，從上至下的一般順序進(jìn)行排列。那么也就可以理解成我們剛才所說(shuō)的一個(gè)二維平面的概念。

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

1.2 定位

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

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

首先我們拋開(kāi)static這個(gè)默認(rèn)值，因?yàn)樗静粚儆诙ㄎ坏姆懂?，因?yàn)樵啬J(rèn)就是static，他就相當(dāng)于是依據(jù)文檔流顯示。

當(dāng)我們使用定位時(shí)，需要position屬性和top,left,right,bottom這兩類(lèi)屬性共同參與來(lái)決定一個(gè)元素的定位類(lèi)型和偏移量。

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

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

1.3 包含塊

包含塊就是個(gè)專(zhuān)有名詞，其實(shí)概念很簡(jiǎn)單，這里了解一下就好。

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

大部分時(shí)候?qū)τ谖臋n流里的元素，其包含塊指的都是其父元素的區(qū)域。
對(duì)于定位元素來(lái)說(shuō)，相對(duì)定位元素包含塊也是其父元素區(qū)域；
絕對(duì)定位元素的包含塊是其帶有position為非static的祖先元素區(qū)域。如果其沒(méi)有這樣的祖先元素的話其包含塊為首屏顯示區(qū)域，這個(gè)區(qū)域也有個(gè)專(zhuān)有名詞叫做初級(jí)包含塊。
固定定位元素的包含塊就是當(dāng)前可視區(qū)的區(qū)域。

1.4 浮動(dòng)

浮動(dòng)允許你將元素浮動(dòng)起來(lái)，脫離文檔流向左或者向右移動(dòng)。直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

雖然浮動(dòng)也脫離文檔流顯示，但是與定位不同的是 inline 和 inline-block 的元素可以識(shí)別這種因浮動(dòng)而脫離的文檔流，從而不發(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>

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

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

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

我們來(lái)具體看下浮動(dòng)的規(guī)則：浮動(dòng)元素會(huì)從最后一行最左側(cè)的空白位置開(kāi)始浮動(dòng)，如當(dāng)前行無(wú)法容納下自己寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。我們這里舉兩個(gè)例子：

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

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

1.4 清除浮動(dòng)

首先為啥要清除浮動(dòng)？

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

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

如何清除浮動(dòng)

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

浮動(dòng)元素或者非浮動(dòng)元素的塊級(jí)元素都可以使用這個(gè)屬性來(lái)清除浮動(dòng)（我們之前說(shuō)inline和inline-block元素可以自動(dòng)識(shí)別浮動(dòng)，所以他們不需要清除浮動(dòng)），他們的作用對(duì)象是前一個(gè)聲明的浮動(dòng)元素。如果使用 clear:left | right 則是清除前一個(gè)float為left或者right的元素的浮動(dòng)，clear：both則是清除前一個(gè)浮動(dòng)元素，無(wú)論它是向哪邊移動(dòng)。那么使用clear屬性的元素會(huì)在浮動(dòng)元素的下方新開(kāi)一行顯示。

清除浮動(dòng)的特殊應(yīng)用

清除浮動(dòng)可以解決父元素高度塌陷問(wèn)題。當(dāng)一個(gè)元素包裹了一些float元素的時(shí)候，由于float元素脫離文檔流顯示，所以父元素?zé)o法被這些元素?fù)伍_(kāi)高度，導(dǎo)致父元素高度為0。

那么最常用的一種解決方案是：設(shè)置父元素的after偽元素的clear屬性來(lái)讓其撐開(kāi)父元素的高度。

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

當(dāng)我們沒(méi)有設(shè)置clearfix的after偽元素時(shí)，會(huì)發(fā)現(xiàn)clearfix的高度為0，只有邊框會(huì)顯示出來(lái)。我們通過(guò)設(shè)置clearfix的after偽元素來(lái)讓我們?cè)诓恍枰略鰳?biāo)簽的情況下就可以清除掉浮動(dòng)，并且clearfix類(lèi)還可以復(fù)用。

注意點(diǎn)：

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

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