Add flow-root display utility

[benface]

The flow-root value for the display property is supported in all major browsers except iOS Safari and it's probably coming soon since it's already in macOS Safari. It's the most straightforward way to create a new block formatting context, which is notably useful to control/prevent margin collapsing (since margins only collapse within the same block formatting context).

[adamwathan]

Hey! Going to wait to merge this until iOS Safari supports it since that's such a huge part of the internet, but will leave it open until then.

[benface]

@adamwathan Actually, my bad, it is supported in iOS Safari as of iOS 13. For some reason Can I Use is wrong about this (I've submitted a report to correct it), but you can try it for yourself: https://codepen.io/benface/pen/PowOBRb. On browsers that don't support display: flow-root, the two red squares will be stacked horizontally (on the same row), while on browsers that do support it, they will be stacked vertically (due to the floats being cleared).

[lkraav]

Hubba-hubba, can this really replace display: inline-block; width: 100%; I've been using to prevent margin collapse 🎉

EDIT verified, works!

[adamwathan]

@benface I'll merge this now if you want to fix conflicts 👍

[benface]

@adamwathan Done!

[adamwathan]

Merged 🤙🏻