web前端入门到实战：CSS清除浮动的方法，通过项目解析总结

清除浮动影响的几种方法:

• 给父级元素设置高度

效果图：

代码：

<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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

• 外墙法：使用一个空白块级元素上添加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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

内墙法 相对于外墙法有相对优点：

内墙法设置后，浮动元素的父级元素会被撑开，也就是说有了高度

• 给浮动元素的父元素添加 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>