8

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.

Community
  • 1
  • 1
Aviel Fedida
  • 4,004
  • 9
  • 54
  • 88
  • http://stackoverflow.com/questions/15939896/css-inline-block-vs-table-cell – himanshu Sep 06 '14 at 10:36
  • http://css-tricks.com/almanac/properties/d/display/ – himanshu Sep 06 '14 at 10:37
  • @himanshu, I know the difference between display properties, my problem is to understand why `display:table` used to contain the top margins of child elements(from my question), if you can provide code example... – Aviel Fedida Sep 06 '14 at 10:40
  • http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table here he gave and explanation with example – himanshu Sep 06 '14 at 10:59
  • 1
    @himanshu, I appreciate your links, but can you explain what "to contain the top-margins of child elements" state? – Aviel Fedida Sep 06 '14 at 11:04

2 Answers2

13

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 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: http://jsfiddle.net/o9rbryxp/2/. – Ilya Streltsyn Jul 30 '17 at 06:02
  • How does adding `display:table` create an anonymous table-cell? – stackjlei Jul 30 '17 at 21:25
  • 1
    @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 https://www.w3.org/TR/CSS22/tables.html#anonymous-boxes – BoltClock Jul 31 '17 at 03:26
-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

Kalu Singh Rao
  • 1,671
  • 1
  • 16
  • 21
  • 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." – Aviel Fedida Sep 06 '14 at 12:42
  • Please follow the instructions here to learn how to cite external sources correctly: http://stackoverflow.com/help/referencing – BoltClock Sep 06 '14 at 14:27