Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總

發(fā)布時(shí)間：2019-07-11 14:08:48 作者：佚名

這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

網(wǎng)頁(yè)布局中經(jīng)常會(huì)用到float浮動(dòng)，但是浮動(dòng)的塊級(jí)元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動(dòng)元素的父元素沒(méi)有高度，導(dǎo)致父級(jí)元素沒(méi)有高度，所以需要清除浮動(dòng)對(duì)父級(jí)元素的影響，本文介紹清除浮動(dòng)的幾種方法。

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

效果圖：

代碼：

<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 外邊距屬性

效果圖：

代碼：

<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)

效果圖：

代碼：

<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)容都要隱藏掉

效果圖：

代碼：

<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>

總結(jié)

以上所述是小編給大家介紹的Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！