display: flow-root;

对我来说是新闻！有 相关规范，并且 Firefox 表示他们打算发布它。它就像 display: block; 一样，只是

它始终为其内容建立新的块级格式化上下文。

.group {
  display: flow-root;
}

这意味着：您不必使用 clearfix 技巧。不过，还有更多内容。Fiona Chan 有 一个迷你演讲，专门介绍块级格式化上下文。我认为它也会在某些情况下影响 z-index 和 transforms。有人知道吗？

我怀疑 Nicole Sullivan 会赞成。她一直在撰写和谈论新的格式化上下文。2010 年，她甚至 撰写

我希望我们有一个简单的属性值对，可以在基于标准的浏览器中执行相同的操作。

.lastUnit {
  formatting-context: new; /* please! */
}

仅仅使用 overflow 并不是真正的解决方案。它会隐藏 box-shadow，仅此而已。

另请参阅

• Rachel Andrew：Clearfix 技巧的终结？
• Thierry Koblentz：display: flow-root 与 clearfix 的对比

直接链接 →