Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Yingnan Zhang
3,642 PointsSame result after using overflow: hidden instead of overflow: auto? Why?
During listening the class, I tried using overflow: hidden instead of overflow: auto, but it gives the same result -- no overlap anymore. But it doesn't make sense to me. I expect the hidden value will make the two floating div disappear. Why?
To dig into more detail, can someone tell me, why using overflow: auto will give the same effect of using float: clear ?
2 Answers
Daniel Jenkins
17,714 PointsA somewhat ham-fisted attempt to explain follows: Using the
overflow
property with any value other than the default (
visible
) forces the element into taking on block formatting characteristics & properties and the browser effectively recognises that the element should have a height after all. A more technical explanation here.
This should go some way to answering your first question too. In this case the collapsed div containing the floated elements only has an apparent height of 0 because of the state of its descendents. Applying
overflow: auto
or
overflow: hidden
"reveals" the element's height to the browser and forces it to treat it accordingly. In this instance the height of the containing div itself is determined by the height of it's (floated) children and there is no overflow to hide when the div doesn't appear collapsed hence both
overflow: auto
or
overflow: hidden
produce the same result.
Hope that makes some sort of sense, typing that out helped me to understand it better!
Tim Sweeney
15,101 PointsThe element with overflow auto applied will extend as large as it needs to encompass child elements inside that are floated. Clearing floats is best achieved by the using a clear fix. I've put a link for you to have a look.
Yingnan Zhang
3,642 PointsYingnan Zhang
3,642 PointsThanks a lot! It makes more sense to me after your explanation.