CSS, using display:table with before pseudo element

Question

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:

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

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.

Edit:

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.

Edit for clarifications:

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.

Answer 1

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:

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.

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.

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

So, basically, the display: table — and by extension, the :before pseudo-element — is not essential to the clearfix, just an additional hack to block margins from collapsing between an element and its first child. If all you want to do is clear inner floats, which is what a clearfix is meant to do, then you don't need display: table or :before.

Answer 2

Major difference between display:table and display:block in following short summary.

display:table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs..

Live Working Demo

display:block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

Live Working Demo

More details here