Css实现清除浮动的方法汇总

网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动的几种方法。

清除浮动影响的几种方法: 给父级元素设置高度

效果图：

代码：

    * {
 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;
    }



    

 
首页
 
文章
 
问答
 
帮助
 
关于
    

外墙法 ：使用一个空白块级元素上添加css样式 clear 清除浮动

注意：添加了clear样式的块级元素添加不了 margin 外边距属性

效果图：

代码：

    * {
 padding: 0;
 margin: 0;
    }
    .header {
 
    }
    .header a {
 
 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;
    }



    

 
首页
 
文章
 
问答
 
帮助
 
关于
    
    



    
主要内容

内墙法 ：使用一个空白块级元素上添加css样式 clear 清除浮动

效果图：

代码：

    * {
 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;
    }



    

 
首页
 
文章
 
问答
 
帮助
 
关于
    
    

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

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

给浮动元素的父元素添加 overflow:hidden

原意：表示移除隐藏，溢出边框的内容都要隐藏掉

效果图：

代码：

    * {
 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;
    }



    

 
首页
 
文章
 
问答
 
帮助
 
关于
    

    
主要内容

总结

以上所述是小编给大家介绍的Css实现清除浮动的方法汇总,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！