前言

浮动会使当前标签产生向上浮的效果，继而会影响到页面效果发生错乱。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。这边我整理了几种原生css清除浮动的几种方式,有不同见解的朋友可以讨论区留言,大佬勿喷!!!!

1.单伪元素清除浮动（推荐的方法）

/*单伪元素清除浮动代码*/ 
.clearfix:after { 
            content: "";
            display: block; 
            overflow:hidden; 
            visibility:hidden;
            height: 0; 
            clear: both; 
            } 
.clearfix { zoom: 1; }

优点：符合闭合浮动思想，结构语义化正确 
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

2.双伪元素清除浮动

.clearfix:after,
.clearfix:before{
                content: ""; 
                display: table;
                }
.clearfix:after{clear: both; } 
.clearfix{ *zoom: 1; }

优点：代码更简洁
缺点：用zoom:1触发hasLayout.

3.给父元素添加overflow:hidden清除浮动

.fahter{ 
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
        }
        
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

4.给父级元素添加高度

<style > 
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;} 
.left{float:left;width:20%;height:200px;background:#DDD;} 
.right{float:right;width:30%;height:80px;background:#DDD;} 
</style> 

<div class="div1"> 
                <div class="left">Left</div>
                <div class="right">Right</div>
           </div> 
<div class="div2"> div2 </div>
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题