溫馨提示×

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

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

Css怎么實(shí)現(xiàn)清除浮動(dòng)

發(fā)布時(shí)間：2021-03-18 14:22:49 來(lái)源：億速云 閱讀：149 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下Css怎么實(shí)現(xiàn)清除浮動(dòng)，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

清除浮動(dòng)影響的幾種方法: 給父級(jí)元素設(shè)置高度

效果圖：

Css怎么實(shí)現(xiàn)清除浮動(dòng)

代碼：

 

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        height: 30px;
        line-height: 30px;
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding-right: 20px;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">首頁(yè)</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問(wèn)答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
</div>

外墻法 ：使用一個(gè)空白塊級(jí)元素上添加css樣式 clear 清除浮動(dòng)

注意：添加了clear樣式的塊級(jí)元素添加不了 margin 外邊距屬性

效果圖：

Css怎么實(shí)現(xiàn)清除浮動(dòng)

代碼：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        /* background-color: #333; */
    }
    .header a {
        /* color: #fff; */
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .clearfix {
        height: 10px;
        background-color: red;
        clear: both;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">首頁(yè)</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問(wèn)答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
    
</div>

<div class="clearfix"></div>
    
<div class="main">主要內(nèi)容</div>

內(nèi)墻法 ：使用一個(gè)空白塊級(jí)元素上添加css樣式 clear 清除浮動(dòng)

效果圖：

Css怎么實(shí)現(xiàn)清除浮動(dòng)

代碼：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
    .clearfix {
        clear: both;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">首頁(yè)</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問(wèn)答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

內(nèi)墻法 相對(duì)于 外墻法 有相對(duì)優(yōu)點(diǎn)：

內(nèi)墻法 設(shè)置后，浮動(dòng)元素的父級(jí)元素會(huì)被撐開(kāi)，也就是說(shuō)有了高度

給浮動(dòng)元素的父元素添加 overflow:hidden

原意：表示移除隱藏，溢出邊框的內(nèi)容都要隱藏掉

效果圖：

Css怎么實(shí)現(xiàn)清除浮動(dòng)

代碼：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
        overflow: hidden;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">首頁(yè)</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問(wèn)答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
</div>
    
<div class="main">主要內(nèi)容</div>

看完了這篇文章，相信你對(duì)“Css怎么實(shí)現(xiàn)清除浮動(dòng)”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(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)容。

css
AI
助
手