CSS 清除浮动的几种方法

效果展示

清除浮动前

清除浮动后

原始代码

html 部分

<div class="box1">
  盒子一
  <div class="subBox1">子盒子一</div>
  <div class="subBox2">子盒子二</div>
</div>
<div class="box2">盒子二</div>

css 部分

.box1,
.box2 {
  width: 600px;
}
.box1 {
  background-color: purple;
}
.subBox1,
.subBox2 {
  float: left;
  width: 200px;
  height: 200px;
}
.subBox1 {
  background-color: pink;
}
.subBox2 {
  background-color: aqua;
}
.box2 {
  height: 200px;
  background-color: skyblue;
}

实现方法

空 div 清除

在浮动元素末尾（也就是 子盒子二 的后面）添加一个空的 div 标签，例如：

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

缺点：会添加许多无意义的标签，结构语义化较差。

父级使用 after 伪元素

这与上面的空 div 清除的方法是等效的，结构语义化较好。

.box1::after {
  content: "";
  clear: both;
  display: block;
}

父级添加 overflow 属性

可以给浮动元素的父级（也就是 .box1）添加 overflow 属性设置为除 visible 外的其他值来触发 BFC。

.box1 {
  overflow: hidden;
  /* overflow: auto; */
  /* overflow: scroll; */
}

可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

父级添加 display: flow-root

这是一个较为现代的方案，它可以无需 clearfix 小技巧^[1]来创建 BFC，在使用上没有副作用。

.box1 {
  display: flow-root;
}

唯一的缺点可能就是兼容性问题，因为它并不像前面的几种解决方案，均可以在所有浏览器中奏效。

参考资料

1. 清除浮动元素周围的盒子 | MDN ↩