Css清除浮動的方法總結

網頁佈局中常常會用到float浮動，可是浮動的塊級元素脫離了標準文檔流，使得浮動元素的父元素沒有高度，致使父級元素沒有高度，因此須要清除浮動對父級元素的影響，本文介紹清除浮動的幾種方法。

清除浮動影響的幾種方法:

• 給父級元素設置高度

效果圖：

代碼：

<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="#">關於</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="#">關於</a></li>
    </ul>
    
</div>

<div class="clearfix"></div>
    
<div class="main">主要內容</div>

• 內牆法：使用一個空白塊級元素上添加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="#">關於</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

內牆法 相對於外牆法有相對優勢：

內牆法設置後，浮動元素的父級元素會被撐開，也就是說有了高度

• 給浮動元素的父元素添加 overflow:hidden

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

效果圖：

代碼：

<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="#">關於</a></li>
    </ul>
</div>
    
<div class="main">主要內容</div>

原文連接：https://www.mi360.cn/articles/94