margin collapsing with "clearfix" fallback

[revyh]

flow-root creates new BFC on element, wich prevent margins of children elements from "leaking". column-count and overflow fallbacks also creates new BFC, so there is no problems with them. But clearfix fallback doesn't create new BFC and margin-top "leaks" from children elements.

Here is the simple pen that illustrates this issue.

If we want to be closer to spec, than we should replace clearfix from

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

to

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

[OliverJAsh]

@revyh

Does your second example have any trade offs? Seems to work over here—creates a new BFC and disables margin collapsing.

[revyh]

@OliverJAsh I don't clearly understand what do you mean by "second example" and "trade offs". I suggest, that you compare second code snippet in this issue with browser implementation of flow-root.

If so, then main trade off is that clearfix doesn't really creates new BFC (more on this in another issue). If you want to use flow-root only as a modern clearfix, then you may don't care about BFC. But there is always be the small chance to break your layout when you switch from this plugin to browser implementation.

[OliverJAsh]

As you have pointed out, the currently used clearfix does not prevent margin collapsing:

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

However, margin collapsing can be prevented by switching this to use the ::before pseudo element instead:

http://output.jsbin.com/poquxa/3

I wonder if there are any drawbacks to using this alternative clearfix?

I was considering using column-count: 1, however there are drawbacks when using absolutely positioned items within:

• https://bugs.chromium.org/p/chromium/issues/detail?id=780733
• http://jsbin.com/bexewig/4

[OliverJAsh]

In fact this seems to work as well:

  .clearfix::before,
  .clearfix::after {
    content: '';
    display: table;
  }

https://codepen.io/OliverJAsh/pen/pdjGrW

[revyh]

@OliverJAsh I think I better explain in terms of this article.

BFC can do many things:

1. It clears floats. Clearfix can do this too. Except your last example, where you omit clear: both
2. It prevents margins from collapsing. We can emulate this by using both ::before and ::after pseudoelements in clearfix. But current implementation uses only ::after. Most likely because @fliptheweb just takes this clearfix from some article like this, which only cares about minimal css code needed to clear floats and don't care about margin collapsing. This is what this issue about.
3. It prevents text wrapping. This is what clearfix can't emulate in any way. This is why I thought that column-count: 1 is better alternative. But, your bugs reported to chrome (and maybe other uncovered) makes me sceptical about column-count too.

I think, that choice of fallback depends on whether you plan to prevents text wrapping or not. If you don't care about this, then you can go with clearfix.