:before、:after 和 display:table 的组合有什么作用？

Question

我一直在研究高质量的CSS表。

作者使用了很多这样的表达方式：

.clearfix:after, 
.clearfix:before, 
.product-slogan:after, 
.product-slogan:before {
  content: " ";
  display: table;
}

我明白他们在做什么:after， content但display我不明白他们共同取得的成就的意义。

我观察到，如果我关闭其中一些，布局会发生很大变化display: table。看起来，他们可以改变嵌套<div>框的布局行为，例如，如果一个框是float: left，而它的父框不是，那么父框的高度将不会适应子框的高度。但有了这个content和display定义，高度就会采用，尽管孩子本身不是display:table。

所以问题是：有人能告诉我这个“把戏”的一些细节或背景吗？这是一个“黑客”，就像著名的“明星黑客”一样，还是它是一些我现在没有看到的非常明显的东西？

感谢您的时间和精力。

Answer 1

它是 microclearfix hack 的一部分，详细描述如下：nicolasgallagher.com: A new microclearfix hack

\n\n

\n

clearfix hack 是一种流行的包含浮动的方法，无需使用表示标记。[...]

\n

\n\n

完整的清除修复是：

\n\n

/**\n * For modern browsers\n * 1. The space content is one way to avoid an Opera bug when the\n *    contenteditable attribute is included anywhere else in the document.\n *    Otherwise it causes space to appear at the top and bottom of elements\n *    that are clearfixed.\n * 2. The use of `table` rather than `block` is only necessary if using\n *    `:before` to contain the top-margins of child elements.\n */\n.cf:before,\n.cf:after {\n    content: " "; /* 1 */\n    display: table; /* 2 */\n}\n\n.cf:after {\n    clear: both;\n}\n\n/**\n * For IE 6/7 only\n * Include this rule to trigger hasLayout and contain floats.\n */\n.cf {\n    *zoom: 1;\n}\n

\n\n

\n

[...]此 \xe2\x80\x9cmicroclearfix\xe2\x80\x9d 生成伪元素并将其显示设置为表格。这将创建一个匿名表格单元格和一个新的块格式化上下文，这意味着 :before 伪元素可以防止顶部边距折叠。:after 伪元素用于清除浮动。因此，无需隐藏任何生成的内容，并且所需的代码总量也减少了。[...]

\n

\n