本篇文章給大家帶來了關於css中浮動佈局以及檔案流的相關知識，其中包括正常檔案流以及脫離檔案流，希望對大家有幫助。

檔案流簡介

什麼叫「檔案流」？簡單來說，就是指元素在頁面中出現的先後順序。可分為「正常檔案流」和「脫離檔案流」。

1、正常檔案流

正常檔案流，又稱為「普通檔案流」或「普通流」，也就是W3C標準所說的「normal flow」。正常檔案流的簡單定義是：「正常檔案流，將一個頁面從上到下分為一行一行的，其中塊元素獨佔一行，相鄰行內元素在每一行中按照從左到右排列直到該行排滿。」即，正常檔案流指的就是預設情況下頁面元素的佈局情況。

如p、p、hr都是塊元素，因此獨佔一行。而span、i、img都是行內元素，因此如果兩個行內元素相鄰，就會位於同一行，並且從左到右排列。

2、脫離檔案流

脫離檔案流，指的是脫離正常檔案流。而想要改變正常檔案流，可以使用兩種方法：浮動和定位。

正常檔案流效果：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正常檔案流</title>
    <style>
        /* 定義父元素樣式 */
        .father{
            width: 300px;
            background-color: #0c6a9d;
            border: 1px solid silver;
        }

        /* 定義子元素樣式 */
        .father p{
            padding: 10px;
            margin: 15px;
            border: 2px dashed rebeccapurple;
            background-color: #fcd568;
        }
    </style></head><body>
    <p class="father">
        <p>box1</p>
        <p>box2</p>
        <p>box3</p>
    </p></body></html>

在這裡插入圖片描述
設定浮動後的效果：
當我們為第二、三個p元素設定左浮動時：正常檔案流情況下，p是塊元素，會獨佔一行。但是由於設定了浮動，第二、三個p元素卻是並列一行，並且跑到父元素之外，跟正常檔案流不一樣。也就是說，設定浮動使得元素脫離了正常檔案流。
在這裡插入圖片描述
設定定位後的效果：
當我們為第三個p元素設定絕對定位的時候：由於設定了定位，第三個p元素跑到父元素的上面去了。也就是說，設定了定位使得元素脫離了檔案流。

浮動

在傳統的印刷佈局中，文字可以按照實際需要來圍繞圖片，我們一般把這種方式稱為「文字環繞」。在前端開發中，使用了浮動的頁面元素其實就像在印刷佈局裡被文字包圍的圖片一樣。這樣比喻，就很好理解了。浮動是CSS佈局的最佳利器，我們可以通過浮動來靈活地定位頁面元素，以達到佈局網頁的目的。例如我們可以通過設定float屬性讓元素向左浮動或者向右浮動，以便讓周圍的元素或文字環繞著這個元素。

float屬性取值只兩2個：
在這裡插入圖片描述
我們再次用到上文的例子：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正常檔案流</title>
    <style>
        /* 定義父元素樣式 */
        .father{
            width: 300px;
            background-color: #0c6a9d;
            border: 1px solid silver;
        }

        /* 定義子元素樣式 */
        .father p{
            padding: 10px;
            margin: 15px;
            border: 2px dashed rebeccapurple;
            background-color: #fcd568;
        }
    </style></head><body>
    <p class="father">
        <p>box1</p>
        <p>box2</p>
    </p></body></html>

在這裡插入圖片描述
接下來我們分別為box1新增左浮動，為box2新增右浮動：

.son1{float: left;}
.son2{float: right;}

在這裡插入圖片描述

由上述例子可見浮動會影響周圍元素，並且還會引發很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。

clear屬性取值如下：
在這裡插入圖片描述
在實際開發中，我們幾乎不會使用「clear:left;」或「clear:right;」來單獨清除左浮動或右浮動，往往都是直截了當地使用「clear:both;」來清除所有浮動。在上述例子的基礎上我們對浮動進行清除：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮動</title>
    <style>
        /* 定義父元素樣式 */
        .father{
            width: 300px;
            background-color: #0c6a9d;
            border: 1px solid silver;
        }

        /* 定義子元素樣式 */
        .father p{
            padding: 10px;
            margin: 15px;
            border: 2px dashed rebeccapurple;
            background-color: #fcd568;
        }
        .son1{float: left;}
        .son2{float: right;}
        .son3{clear: both; display: block;}
    </style></head><body>
    <p class="father">
        <p class="son1">box1</p>
        <p class="son2">box2</p>
        <span class="son3"></span>
    </p></body></html>

在這裡插入圖片描述
我們一般都是在浮動元素後面再增加一個空元素，然後為這個空元素定義clear:both;來清除浮動。在實際開發中，使用浮動之後如果發現有什麼不對勁的地方，首先檢查有沒有清除浮動。事實上，清除浮動不僅僅只有clear:both;，還有overflow:hidden，以及更為常用的偽元素。

（學習視訊分享：）

以上就是一起聊聊CSS浮動佈局及檔案流的詳細內容，更多請關注TW511.COM其它相關文章！