清除浮动的最常用的四种方法，以及优缺点

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

1.如下，我给父盒子设置一个boder，内部放两个盒子一个box1 一个box2，未给box1和box2设置浮动，则他们会默认撑开父盒子.

image.png

2.当我们给内部两个盒子都加上float属性的时候。

image.png

我们已经给box1和box2加上浮动属性了，因为父元素没有加高度导致底部黄色的盒子顶了上来，变成了一条线。

总结一下：
当父元素不给高度的时候，内部的子元素会自动撑开；而浮动时父元素会变成一条线。

那我们该怎么解决这个问题呢，往下看。

清除浮动的方法（最常用的4种）

1.额外标签法（在最后一个浮动标签后，新加一个空div标签，给其设置clear：both；）（不推荐）

    
    
    


    

        
box1
        
box2
        
额外的
    
    

效果如下：

image.png

如果我们清除了浮动，父元素就会自动检测盒子最高的高度，然后与他同高。
优点：通俗易懂，方便。
缺点：添加无意义的标签，语义化差。

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
通过触发BFC方式，实现清除浮动

 .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素(不推荐使用)

3.使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 

    

        
big
        
small
    
    

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.(推荐使用)

4.使用before和after双伪元素清除浮动(代码简洁，推荐使用)

        .clearfix::before,
        .clearfix::after {
          content: "";
          clear: both;
          display: block;
        }


       
box1
       
box2