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。

所以问题是：有人可以讲一些关于这个＆＃34;技巧的细节或背景吗？它是一个＆＃34; hack＆＃34;，就像着名的＆＃34;明星黑客＆＃34;，还是它显而易见的东西显而易见我现在还没有看到？

感谢您的时间和精力。

Answer 1

这是详细描述的微清除黑客攻击的一部分：nicolasgallagher.com: A new micro clearfix hack

clearfix hack是一种流行的方法，可以在不使用表示性标记的情况下包含浮点数。[...]

完整的clearfix是：

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

[...]这个“micro clearfix”生成伪元素并将它们的显示设置为表格。这将创建一个匿名表单元格和一个新的块格式化上下文，这意味着：before伪元素可防止上边距折叠。：after伪元素用于清除浮点数。因此，无需隐藏任何生成的内容，并且减少了所需的代码总量。[...]

这个组合是什么：before，：after和display：table吗？

1 个答案: