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.
- 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:
Neat, really neat.
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!