詳解CSS布局中浮動問題的四種解決方案

發(fā)布時間：2020-08-31 16:28:31 作者：一如既往。

這篇文章主要介紹了詳解CSS布局中浮動問題的四種解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、起因：

子盒子設(shè)置浮動之后效果：

由此可見，藍(lán)色的盒子設(shè)置浮動之后，因為脫離了標(biāo)準(zhǔn)文檔流，它撐不起父盒子的高度，導(dǎo)致父盒子 高度塌陷 。如果網(wǎng)頁中出現(xiàn)了這種問題，會導(dǎo)致我們整個網(wǎng)頁的布局紊亂

二、解決方案：

父盒子設(shè)置固定高度------------------給父元素添加固定的高度
內(nèi)墻法 -------------------------------在父元素的后面添加一個空的div添加樣式為 clear:both
偽元素清除法-------------------------給父元素類名添加一個類叫 clearfix （推薦）
overflow:hidden---------------------給父元素樣式添加 overflow:hidden

（1）父盒子設(shè)置固定高度

雖然，給父盒子設(shè)置了固定高度能暫時解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發(fā)生了改變(網(wǎng)頁的多處地方)，那么我們得手動需要更改父盒子的高度。后期不易維護(hù)。

應(yīng)用：網(wǎng)頁中盒子固定高度區(qū)域，比如固定的導(dǎo)航欄。

缺點：使用不靈活，后期不易維護(hù)

（2）內(nèi)墻法

在浮動元素的后面加一個空的塊級元素 (通常是div),并且該元素設(shè)置 clear:both； 屬性。clear屬性，字面意思就是清除，那么both,就是清除浮動元素對我左右兩邊的影響。

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動元素的破壞性</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">兒子</div>
            <div class="clearfix"></div>
        </div>
    </body>
    </html>

應(yīng)用：網(wǎng)頁中應(yīng)用不多，只是為了引導(dǎo)下一個清除浮動的方式。

缺點：結(jié)構(gòu)冗余

（3）偽元素清除法

內(nèi)墻法是在浮動元素的后面加一個空的塊級元素 (通常是div),并且該元素設(shè)置 clear:both； 屬性。

那么正好在css3的屬性用法中整好有個選擇器也完全符合這個用法，偽元素選擇器。它就像偽類一樣，讓偽元素添加了選擇器，但不是描述特殊的狀態(tài)，允許為元素的某些部分設(shè)置樣式。

表示在p標(biāo)簽元素的最后面添加樣式，同時這也正好符合內(nèi)墻法的用法。

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動元素的破壞性</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .cleafix:after{
                content:'.';
                display: block;
                clear: both;
                overflow: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="father clearfix">
            <div class="child">兒子</div>
        </div>
    </body>
    </html>

當(dāng)以后需要清除浮動時只需要在標(biāo)簽中再添加一個 “clearfix” 類就行，十分的方便快捷！

編寫的偽元素清除法內(nèi)容解釋：

.clearfix:after{
        content:'';    　　　表示給.clearfix元素內(nèi)部最后添加一個內(nèi)容，該內(nèi)容為行內(nèi)元素。
        display: block;   　　　　設(shè)置該元素為塊級元素，符合內(nèi)墻法的需求。（有的地方使用table，因為table也是一個塊級元素）
        clear: both;  　　　 清除浮動的方法。必須要寫
        overflow: hidden; 　　　　如果用display:none;,那么就不能滿足該元素是塊級元素了。overflow:hidden;表示隱藏元素，但是該元素占位置；而display:none;不占位置。
        height: 0;
    }

此處梳理一下：after（偽類）和：：after（偽元素）的區(qū)別

相同點