I am experimenting with this tutorial codeplay simple navigation with hover.I am not able to understand why removing the overflow: hidden; property from the .navigation class in this tutorial changes the background color? Isn't this property concerned with the decision of giving a scroll bar to the user or not in case the text in the box overflows.
Asked
Active
Viewed 69 times
2
Bunny Rabbit
- 8,213
- 16
- 66
- 106
-
It doesn't change the `background-color`. If floated elements have non-floated parent elements, then the parent will collapse. Check out [this SO question](http://stackoverflow.com/q/218760/681807) and this [Clearing Floats article](http://www.quirksmode.org/css/clearing.html) for more information and other solutions for fixing this collapse – My Head Hurts Apr 02 '12 at 14:17
1 Answers
0
It is because the li elements are floated. Setting an overflow other than visible on a wrapper of floated elements causes that wrapper to truly "wrap" the elements (otherwise, it does not recognize them and its height becomes zero).
The overflow allows one to not use a clearfix or some other means of getting the wrapper to wrap the float. *If you wanted to set the overflow to visible then a clearfix of some type would be needed to get the .navigation to gain height and wrap the li elements within it.
ScottS
- 71,703
- 13
- 126
- 146