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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

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.