CSS，使用display：table与before伪元素 [英] CSS, using display:table with before pseudo element

问题描述

我一直在寻找最好的方法来清除浮动和找到这完美解决方案，如果你看看答案，解决方案使用 display：table 而不是显示：block ，原因解释如下：

I was looking for the best way to clear floats and find this perfect solution, if you take a look at the answer, the solution use display:table rather than display:block, the reason is explained:

使用 table ：before 包含顶边距，则只需要c $ c>而不是的子元素。

The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.

我尝试理解的意思，我做了一些测试，但我不知道是什么原因使用 display：table ，如果任何人都可以提供一个代码示例来显示差异，并需要使用 display：table 。

I try to understand the meaning, I did some tests but I can't figure out what is the reason for using the display:table, if anyone can provide a code example to show the difference and the need to use display:table.

编辑：

这里是小提琴，我试着测试差异，我敢肯定有一个，但我不能弄清楚要测试什么。

Here is a fiddle, I try to test the difference, I'm sure there is one but I can't figure out what to test.

编辑说明：

我的问题不是显示 block / table 之间的区别，我的问题是关于使用 display：table 而不是 display：block （关于清除浮动广告），有一个由Bryan从

My question is not about the difference between display block/table, my question is about the reason for using the display:table and not display:block(in relation of clearing floats), there is an explanation brought by Bryan from this answer, but I can't understand the reason, if anyone can explain what the reason and maybe provide a code example that illustrate the difference.

推荐答案

注释和扩展名，你引用的代码是来自micro clearfix正如Nicolas Gallagher所提出的，正如在这个问题的最高答案中所提到的。 Nicolas写了一篇文章介绍这种技术（由于某种原因，它与其他答案中没有联系），并在其中他解释为什么使用 display：table ，如下所示：

The comment — and by extension, the code — that you've quoted is from the micro clearfix hack as proposed by Nicolas Gallagher, as mentioned in the top answer to that question. Nicolas wrote an article introducing the technique (which for some reason isn't linked to within the other answer), and in it he explains why display: table is used, as follows:

clearfix生成伪元素，并将显示设置为表。这创建了一个匿名表格单元格和一个新的块格式化上下文，这意味着：before 伪元素防止顶部边缘折叠。使用：之后的伪元素来清除浮动。因此，不需要隐藏任何生成的内容，并且减少了所需的代码总量。

This "micro clearfix" generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.

更详细地，如果一个元素有第一个子元素，并且它们都是 display：block ，并且子元素具有顶部边距，发生的情况是子边界将合并，或 collapse ，包括父边距（如果有），导致顶部边缘显然从子元素消失，这有时是不期望的。有关此效果的说明，请参见此问题 。

In more detail, if an element has a first child and both of them are display: block, and the child has a top margin, what happens is that the child margin will combine, or collapse, with the parent margin (if any), resulting in the top margin apparently disappearing from the child element, which can sometimes be undesirable. For an illustration of this effect, see this question.

由于显而易见的原因，边距不会通过表格元素折叠，这就是为什么 display：table

Margins do not collapse through table elements for obvious reasons, which is why the display: table hack works.

因此，基本上， display：table 伪元素 - 对于clearfix不是必需的，只是一个额外的黑客来阻止元素和它的第一个孩子之间的折叠边距。如果你想要做的是清除内部浮动，这是一个clearfix是做什么，那么你不需要 display：table 或 ：before 。

这篇关于CSS，使用display：table与before伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！