Establishing a new block formatting context using overflow: hidden;

Today Vasilis tweeted a link to a very nice (and old, apparently) CSS trick:

Here's your monthly reminder that this is an obscure, but very handy feature of CSS overflow. http://t.co/4qNriVlB5y

— Vasilis (@vasilis) February 13, 2014

Overflow does some cool things you should know about.

1. Creates Block Formatting Context
2. 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:

Check out this Pen!

Neat, really neat.

Overflow – a secret benefit →