web前台入门到实战：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>