Establishing a new block formatting context using overflow: hidden;

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

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 →

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.