该clearfix现在黑客已经存在了很长一段时间，和修补程序可以与浮动比它们更大的容器发生的元素的一个问题。

下面是问题的一个例子：

.box {
  padding: 1rem;
  background: rgba(255, 105, 180, 0.1);
  border: 3px dashed rgba(255, 105, 180, 0.1);
  border-radius: 5px;
}
.box img {
  float: left;
}

<div class="box">
  <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英…

旧的清除修复黑客

旧的修复方法是overflow: auto在容器上设置，因此通常会在包含浮动元素的元素上创建和使用这样的类：

.clearfix {
  overflow: auto;
}

<div class="box clearfix">
  <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

现在一切都按预期进行：

Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英…

显示：流根改进

使用display: flow-root在容器元素上，为具有流布局格式的元素建立了一个新的块格式上下文，这更优雅地解决了我们的溢出问题。

.box {
  display: flow-root;
  padding: 1rem;
  background: rgba(255, 213, 70, 0.1);
  border-bottom: 2px solid rgba(236, 198, 48, 0.2);
}

<div class="box">
  <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英…

浏览器兼容性

根据Can I Use 数据 ，截至 2020 年，全球 87% 的浏览器将正确处理流根。Opera Mini和Internet Explorer 11无法处理display: flow-root;，但在 2020 年它占全球使用量的不到 1.5%。