为什么清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了。

1. 额外标签法（隔墙法）

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构比较差
另外要求这个新的标签必须是块级元素。
最后一个标签后面添加标签

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

2. 父级overflow：hidden；

优点：书写简单
缺点：溢出隐藏

3. :after 方式是额外标签法的升级版，也是给父元素添加。

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {/* IE6,7专有 */  由于这个版本不支持：after 会有兼容性问题
  *zoom: 1;
}

.clearfix {
  *zoom:1;
  &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度 淘宝 网易等

4. 双伪元素清除浮动，也是给父元素添加

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear:both;
}

.clearfix {
  *zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器

点赞加关注，永远不迷路