css中after偽類清除浮動(dòng)的案例分析

發(fā)布時(shí)間：2020-10-24 16:19:04 來源：億速云閱讀：194 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css中after偽類清除浮動(dòng)的案例分析，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先大家要了解什么是css浮動(dòng)？

使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級邊界或者相鄰的浮動(dòng)元素停了下來。

也可以這樣理解：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

那么我們?yōu)槭裁匆?strong>清除浮動(dòng)呢？

這是因?yàn)楦?dòng)元素有時(shí)會(huì)影響整體的布局，產(chǎn)生一些bug。

如下代碼：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css浮動(dòng)示例</title>
<head>
    <style>
        .demo{
       
            background: #ffffff;
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
        }
        .demo1{
    float: left;
    width: 100px;
    height: 50px;
    color: white;
    background: #1094f2;
    border: 1px solid black;
        }
        .demo2{
    float: left;
    width: 100px;
    height: 50px;
    color: white;
    background: #9492ff;
    border: 1px solid black;


         }
 </style>
</head>
<body>
<div class="demo">
    <div class="demo1">demo1</div>
    <div class="demo2">demo2</div>
</div>

</body>
</html>

效果如下圖：

css中after偽類清除浮動(dòng)的案例分析

圖中可以看到我們在給demo1.2設(shè)置浮動(dòng)屬性float:left后，沒有將父div撐開的情況。而且我們并沒有給demo設(shè)置寬高尺寸。

這里大家就先要了解css中浮動(dòng)屬性是什么？

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。

那么當(dāng)我們遇到一些影響布局的浮動(dòng)怎么清除呢？

下面就給大家介紹最主流的清除方法，使用css after偽類。

添加以下代碼即可：

.demo:after{
    clear: both;
    content: '';
    display: block;
}

最終效果如下：

css中after偽類清除浮動(dòng)的案例分析

其實(shí)主要原理就是：

利用:after和:before在元素內(nèi)插入兩個(gè)元素塊，從而達(dá)到清除浮動(dòng)的效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中after偽類清除浮動(dòng)的案例分析內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

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

css中after偽類清除浮動(dòng)的案例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽