11

A new display value flow-root has been added to the 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?

Gajus
  • 69,002
  • 70
  • 275
  • 438

1 Answers1

12

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I was primarily not clear about when one would seek to float elements without wanting to clip overflow-ing content. After talking on IRC about it, one possible use case is to enable tooltips for floated elements. – Gajus Apr 22 '17 at 12:23