告别ClearfixHack显示：flow-root

clearfix hack 已经存在很长时间了，它修复了一个比容器大的浮动元素可能发生的问题。

这是问题的一个例子：

.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 sit amet, consectetur adipiscing elit...

旧的 clearfix 黑客

旧的解决方法是在容器上设置 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 sit amet, consectetur adipiscing elit...

---

显示：流根改进

在容器元素上使用 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 sit amet, consectetur adipiscing elit...

浏览器兼容性

截至 2020 年，全球 87% of 浏览器将正确处理 flow-root，基于 Can I Use data. Opera Mini 和 Internet Explorer 11 不能处理 display: flow-root;，但到 2020 年，它在全球范围内的使用量不到 1.5% of。