Ahmad Shadeed is at it again(*), this time with a guide on Overflow in CSS:
In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties.
For this article, I will give an introduction to those properties, and then we will dive together into some concepts and use-cases that are related to overflow. Are you ready? Let’s dive in!
flow-root establishes 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.
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 …
Overflow does some cool things you should know about.
Creates Block Formatting Context
Clears Floats
The second feature I did know, the first I didn’t.
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.
Embedded below is an example with an img, adjacent to a div(recognisable by its grey background color), which is being left floated. The div in the second example has overflow: hidden; applied to it. The one in the first example hasn’t:
