Css實現(xiàn)清除浮動的方法匯總

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

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

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

清除浮動影響的幾種方法: 給父級元素設(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="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
</div>

外墻法：使用一個空白塊級元素上添加css樣式 clear 清除浮動

注意：添加了clear樣式的塊級元素添加不了 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="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問答</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)墻法：使用一個空白塊級元素上添加css樣式 clear 清除浮動

效果圖：

代碼：

<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="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

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

內(nèi)墻法設(shè)置后，浮動元素的父級元素會被撐開，也就是說有了高度

給浮動元素的父元素添加 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="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">問答</a></li>
        <li><a href="#">幫助</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
</div>
    
<div class="main">主要內(nèi)容</div>

總結(jié)

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