2

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.

Bunny Rabbit
  • 7,604
  • 15
  • 55
  • 100
  • 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 Answers1

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
  • 68,932
  • 12
  • 117
  • 139