CSS中浮动元素经常会导致其父元素的高度无法自适应，从而出现一些奇怪的布局问题，所以我们需要清除浮动。以下是几种清除浮动的方式：

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}

1. 使用clearfix

clearfix是最常用的清除浮动的方法。它会插入一个伪元素，然后给这个伪元素设置clear属性，从而清除浮动。具体实现可以参考上面的代码。

.parent {
  overflow: hidden;
}

2. 使用overflow

给父元素添加overflow属性，可以触发BFC，从而清除浮动。缺点是，如果这个父元素有边框或者背景色，可能会遮盖其他元素。

.parent:before, .parent:after {
  content: "";
  display: table;
}
.parent:after {
  clear: both;
}

3. 使用:before和:after

这种方法需要在父元素上添加:before和:after伪元素，然后给其中一个设置clear:both。这样就可以清除浮动了。缺点是，这种方法会增加渲染时间。

.parent {
  display: flow-root;
}

4. 使用display: flow-root

flow-root是CSS中的一个新属性，可以触发BFC并且清除浮动。但是这个属性目前只有比较新的浏览器支持，兼容性不太好。