溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS基礎(chǔ)之清除浮動(dòng)

發(fā)布時(shí)間：2020-07-01 21:56:55 來源：網(wǎng)絡(luò) 閱讀：659 作者：fchengjin 欄目：開發(fā)技術(shù)

CSS基礎(chǔ)之清除浮動(dòng)

  本人前端菜鳥一枚，在學(xué)習(xí) CSS 過程中發(fā)現(xiàn)網(wǎng)上流傳的教程參差不齊，要么內(nèi)容不夠詳細(xì)，要么方法就是錯(cuò)的。本文是在我參考了許多前輩經(jīng)驗(yàn)的基礎(chǔ)上編寫的，如有錯(cuò)誤的地方，請各位大牛不吝賜教。以下是我總結(jié)的三種行之有效而且比較簡單實(shí)用的方法。


一、父級div定義偽類 :after


代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基礎(chǔ)之清除浮動(dòng)</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: #3ac;
        }
        .father{
            margin: 10px auto;
        }
        .float_left{
            float: left;
            background: #a3f;
            width: 70%;
            height: 450px;
        }
        .float_right{
            float: right;
            background: #f3f;
            width: 30%;
            height: 300px;
        }
        .father:after{
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">頭部</div>
<div class="father">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>
<div id="footer">底部</div>
</body>
</html>

其中關(guān)鍵的部分為：

 .father:after{
            display: block;
            content: "";
            clear: both;
        }

  這里 content 的值盡量寫為空或者不寫，如果寫其他值，則需添加多余的代碼，舉例如下：

 .father:after{
          display: block;
          height: 0;
          visibility: hidden;
          content: "清除浮動(dòng)";
          clear: both;
        }

雖然也能清除浮動(dòng)，但多了一些不必要的代碼。


二、在結(jié)尾處添加空的div標(biāo)簽


原理跟使用 :after 偽類一樣，都是通過 clear: both; 來實(shí)現(xiàn)的。示例代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基礎(chǔ)之清除浮動(dòng)</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: #3ac;
        }
        .father{
            margin: 10px auto;
        }
        .float_left{
            float: left;
            background: #a3f;
            width: 70%;
            height: 450px;
        }
        .float_right{
            float: right;
            background: #f3f;
            width: 30%;
            height: 300px;
        }
        .clr{
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">頭部</div>
<div class="father">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clr"></div>
</div>
<div id="footer">底部</div>
</body>
</html>


三、父元素定義 overflow：auto;


HTML結(jié)構(gòu)跟上面一樣，CSS樣式部分如下：

*{
    margin:0;
    padding: 0;
}
#header,#footer{
    width: 100%;
    height: 50px;
    background: #3ac;
}
.father{
    margin: 10px auto;
    overflow: auto;
}
.float_left{
    float: left;
    background: #a3f;
    width: 70%;
    height: 450px;
}
.float_right{
    float: right;
    background: #f3f;
    width: 30%;
    height: 300px;
}

這種方法使用起來很簡單，但具有一定的局限性。內(nèi)部寬高超過父級div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。 


以上就是清除浮動(dòng)的三種方法。另外如果父元素本身也是浮動(dòng)的話，則父元素內(nèi)就無需清除浮動(dòng)。要根據(jù)實(shí)際情況選擇可行的方法。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手