display: flow-root; use case by Paul Bakaus:
flow-rootestablishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image.
In the image above you can see that the
<ul>‘s bounding box appears behind the floated element, thus rendering the list bullets above/behind said image.
The fix is to create a new block formatting context, which is exactly what
display: flow-root; affords.
💁♂️ What is this “new block formatting context” exactly? As per spec:
The bounding box of an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
In the past, one would’ve used
overflow: hidden; to achieve the same result.
However, as browser support for
display: flow-root; is still lacking (Firefox 53, Opera 45, and Chrome 58 are the only browsers that support it) we’ll have to stick to the
overflow: hidden; method for a little while longer …