flow-root

Rachel Andrew with a clear (get it?!) explanation of display: flow-root;, including demos comparing old and new techniques. Apparently the name is still a little bit still up in the air.

The whole point of it is getting rid of clearfix (although it is a bit different), or using a different/unintended property for float clearning. Every time this is brought up, there is always a well actually about how overflow: hidden; does the same (or any other property that creates a new block formatting context). Like we mentioned before, overflow has consquences totally unrelated to float clearning, like hiding shadows. All of the other methods have unrelated consequences.

News to me! There is a spec for it and Firefox says they intend to ship it. It's just like display: block; only:

It always establishes a new block formatting context for its contents.

.group {
  display: flow-root;
}

Meaning: you don't have to use clearfix hacks. There is a bit more to it though. Fiona Chan has a mini-talk all about block formatting context. I think it affects z-index and transforms in some cases too. Anybody?

I suspect Nicole Sullivan will approve. She's been writing and talking about new formatting contexts forever. In 2010 she even wrote:

I wish we had a simple property value pair that would do the same thing in standards-based browsers.

.lastUnit {
  formatting-context: new; /* please! */
}

Just using overflow isn't a real solution. It hides box-shadow, for one thing.

Also See

• Rachel Andrew: The End of the Clearfix Hack?
• Thierry Koblentz: display: flow-root versus clearfix