What is display: flow-root?

MDN says:

display: flow-root: The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.

So, using display: flow-root means

• you don't have to use .clearfix hacks, and
• won't hide box-shadow comparing to use overflow: hidden

References:

• display: flow-root, from CSS-Tricks
• display: flow-root versus clearfix