詳解CSS布局中浮動(dòng)問(wèn)題的四種解決方案

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

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

一、起因：

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

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

二、解決方案：

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

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

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

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

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

（2）內(nèi)墻法

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

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動(dòng)元素的破壞性</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è)中應(yīng)用不多，只是為了引導(dǎo)下一個(gè)清除浮動(dòng)的方式。

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

（3）偽元素清除法

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

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

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

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動(dòng)元素的破壞性</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)以后需要清除浮動(dòng)時(shí)只需要在標(biāo)簽中再添加一個(gè) “clearfix” 類就行，十分的方便快捷！

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

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

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

相同點(diǎn)