css清除浮動的方法介紹

css如何清除浮動？為了讓大家更加了解css清除浮動的方法，小編給大家總結了以下內容，一起往下看吧。

1、給父級元素設置高度

效果圖：

代碼：

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

2、外墻法 ：使用一個空白塊級元素上添加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>

3、內墻法 ：使用一個空白塊級元素上添加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>

內墻法 相對于 外墻法 有相對優點：

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

4、給浮動元素的父元素添加 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>

關于css清除浮動的方法介紹就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。