清除浮动的几种方法以及优缺点

清除浮动是面试时的高频考点，所以也必须要掌握

我们写一个例子，定义一个box父盒子，里面有两个子盒子，父盒子不给高度，里面的两个子盒子浮动

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>

.box {
      width: 400px;
      border: 5px solid red;
    }
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
    .right {
      float: right;
      width: 200px;
      height: 200px;
      background-color: lightgreen;
    }

因为父盒子没有高度，所以会出现一个塌陷的效果

 怎么解解决呢，来说一下方法，1.第一个清除浮动的方法，给父元素加一个固定高度

.box {
      width: 400px;
      height: 250px;
      border: 1px solid red;
    }

 效果

 这个方法都不用想太多，最简单了，没有兼容性问题，缺点嘛，内部元素高度不确定的情况下就不能使用了

2.第二个方法，添加新元素，我在子盒子最后添加一个div盒子

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>//添加了一个类名叫clear的div盒子
  </div>

.clear {
      clear: both;//清除浮动
    }

效果

 这个方法也简单，代码量少，没有兼容性问题，缺点就是需要添加无语义的html元素，代码不够优雅，也不利于后期维护

3.使用伪元素，给父盒子加伪元素

.box::after {
      display: table;
      content: '';
      clear: both
    }

效果

 照样可以实现，它仅用了css来实现，不容易出现怪问题，缺点嘛，就仅支持IE8以上和非IE浏览器

4.触发父元素BFC，如使用overflow：hidden

.box {
      overflow: hidden;
      width: 400px;
      /* height: 250px; */
      border: 1px solid red;
    }

效果

 这个方法也是仅用css来实现，代码少，浏览器支持好，但是，因为用的是overflow：hidden，可能会使内部本应该正常显示的元素被剪裁，所以这个方法，慎用

使用伪元素来清除浮动，是面试时必须要会手写的，即使它简单