4种清除浮动的方式

清除浮动

​ 所谓清除浮动其实就是清除在子元素浮动，父元素没有设置高度的情况下会引起父元素高度为0的影响。

1. 额外标签法:

   <p style="clear:both;"></p>
   

   缺点是每清除一个浮动要加一个标签，很麻烦，而且会产生多余的空标签，不注意时会影响到布局

2. 直接给父元素加 overflow：hidden；

   tps:万能老司机清除浮动，（其实就触发BFC），缺点是overflow作用在很多地方，会影响其他布局，使用的时候要注意，不建议使用。

   BFC:全称 Block Formatting Context（块级格式化上下文），是一个隐含的属性。

   满足以下一个或多个条件时可以触发

   1、float的值不是none。
   2、position的值不是static或者relative。
   3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
   4、overflow的值不是visible

   BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

3. 伪元素清除法（推荐的方法，不会产生多余的空标签）

   1. 使用方式：在父元素的类名后加上清除浮动的类名或者直接在父级类名后加伪元素

      <div class="box clearfix"></div>
      

   .clearfix:before{
   
       concent:' ';
   
        display:table;
          clear:both;
   
       height:0px;
   
   }
   或者：
   .clearfix:after{
   
       concent:' ';
   
        display:table;
          clear:both;
   
       height:0px;
   
   }
   

   兼容IE的写法：
   .clearfix{
   
   *zoom: 1 ;
   
   }
   

   4.双伪元素清除法：

   .clearfix:before,.clearfix:after{
   
       concent:' ';
   
        display:table;
          clear:both;
   
       height:0px;
   
   }
   

   使用方式：在父元素的类名后加上清除浮动的类名或者直接在父级类名后加伪元素

   <div class="box clearfix"></div>