溫馨提示×

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

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

bootstrap清除浮動(dòng)的類名是哪個(gè)

發(fā)布時(shí)間：2022-05-10 15:39:13 來(lái)源：億速云 閱讀：270 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了bootstrap清除浮動(dòng)的類名是哪個(gè)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇bootstrap清除浮動(dòng)的類名是哪個(gè)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

bootstrap中清除浮動(dòng)的類名是clearfix；clearfix是bootstrap中的一個(gè)輔助類，可以通過(guò)將“.clearfix”添加到父元素的方式來(lái)輕松清除浮點(diǎn)數(shù)，語(yǔ)法為“<element class="clearfix">”。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap清除浮動(dòng)的類名是什么

我們知道，在靜態(tài)頁(yè)面的編寫中，清除浮動(dòng)是一件很繁瑣的事情。

所以一般的CSS框架都會(huì)有用來(lái)清除浮動(dòng)的樣式。

在bootstrap中，這個(gè)樣式叫 clearfix.

只要在需要清除浮動(dòng)的元素的父元素加上clearfix就可以了。

Clearfix用于通過(guò)將.clearfix添加到父元素來(lái)輕松清除浮點(diǎn)數(shù)

語(yǔ)法類似：

<div class="clearfix">...</div>

示例如下：

新建一個(gè)html文件，命名為test.html，用于講解bootstrap中清除浮動(dòng)使用哪個(gè)類。使用link標(biāo)簽加載bootstrap.min.css文件。

在div標(biāo)簽內(nèi)，再使用div創(chuàng)建兩行文字。給外層div添加class屬性，并通過(guò)class設(shè)置它的寬度為350px，高度為100px，背景顏色為灰色。

在內(nèi)層兩個(gè)div之前，再添加一個(gè)div，并給它添加清除浮動(dòng)類名clearfix，實(shí)現(xiàn)上下兩個(gè)div的浮動(dòng)相互不影響。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
    <style>
        .mytest{
            width:400px;
            height:50px;
            background:#ccc;
        }
    </style>
    <div class="mytest">
        <div class="pull-left">測(cè)試一</div>
        <div class="clearfix"></div>
        <div class="pull-left">測(cè)試二</div>
    </div>
</body>
</html>

在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的效果。

bootstrap清除浮動(dòng)的類名是哪個(gè)

關(guān)于“bootstrap清除浮動(dòng)的類名是哪個(gè)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“bootstrap清除浮動(dòng)的類名是哪個(gè)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

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

AI
助
手