9

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.

Improve this question
5

2 Answers 2

Reset to default
14

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I'd like to add that preventing margin collapsing also guarantees that not only direct floated children of the "clearfixed" container will be contained, but also all floats deeply nested in its non-floating block descendants. Otherwise, the following situation is possible: jsfiddle.net/o9rbryxp/2.
How does adding display:table create an anonymous table-cell?
@stackjlei: For a table to display correctly, the spec requires, at minimum, 1) a table box (display: table), 2) a table-row box (display: table-row), and 3) a table-cell box (display: table-cell). If you set any of these display values to an element without setting the appropriate values to its parent and/or child, anonymous boxes will be generated. See w3.org/TR/CSS22/tables.html#anonymous-boxes
-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

enter image description here

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

enter image description here

More details here

Improve this answer

2 Comments

Hey @Singh, thank you for your answer, but my question is not about the way table/block are displayed, my question is about the statement from my question about "The use of table rather than block is only necessary if using :before to contain the top-margins of child elements."
Please follow the instructions here to learn how to cite external sources correctly: stackoverflow.com/help/referencing

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.