How do you understand "overflow:hidden" in the CSS of the codepen snippet?

This is a codepen snippet.

With "overflow:hidden" being set for the div with class "father", I can actually see the father CSS "box" with background color pink. However, if that is not set, I cannot see the father CSS "box".

So what does "overflow:hidden" used for in this scenario?
condor888Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zc2Commented:
you don't see the pink without the overflow because the height of the father is zero.
if you add this style to the father "border: 2px solid red;" you will see that.
0
condor888Author Commented:
Hi zc2, thanks for your quick comments. That's a good way to debug. So the question comes to be why with "overflow:hidden", the outside box can be pushed bigger? Thanks!
0
Alexandre SimõesManager / Technology SpecialistCommented:
This is a CSS "trick" that I just acknowledged and accepted as is some years ago.

It just works like that.
Actually now I went to search for a "scientific" explanation and found this one:
https://css-tricks.com/containers-dont-clear-floats/

It becomes clear why this is implemented in this way and why it would be even worse if all the containers actually expanded.
0
skijCommented:
When a float is used with a child item, the height of the floated child item is determined by the context of its parent block-level element.

This is described by W3's specification 9.4.1 (Block formatting contexts).
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

This documentation may be helpful:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

If you want a floated element to fill the total available height then that element needs to have its own block-level context.  A block-level context can be created for a floated element several different ways, each with its own implications.

1) overflow:hidden

http://codepen.io/anon/pen/RWoeVw

By setting overflow to hidden, you are creating a new block-level context, which is needed because items with a hidden overflow are intended to maintain the same layout regardless of height.  

2) position: absolute

http://codepen.io/anon/pen/NGbOpd

Setting position: absolute on an element requires a new float context to be created because items with an absolute position may have a different height than their parent elements, without impacting the parent elements.

3) float: left (or float: right)

http://codepen.io/anon/pen/meOzWy

Floated elements create their own block-level context.

4) display: inline-block

http://codepen.io/anon/pen/xwRydQ

A new block-level context is created by inline-block elements, by definition.

--------
Generally speaking, I would recomend using display: inline-block when a new block formatting context is needed.
2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.