What is the difference between using display: flow-root and overflow: hidden to contain floats?

Question

A new display value flow-root has been added to the css spec:

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2] – https://drafts.csswg.org/css-display/#valdef-display-flow-root

There are many ways to create a block context, e.g. overflow: hidden.

What is different about using display: flow-root vs overflow: hidden to contain float-ed elements?

Answer 1

display: flow-root allows your flow root element to have overflow: visible if that's important to you, since block boxes with overflow: visible do not normally establish block formatting contexts.