-1

This is the link

I understand that the overflow property determines what to do with “the excess part” of something, for example, to hide or to put a scrollbar. In the example, if I erase the overflow property, the ul will be just a line as the list is floated. How is the overflow: hidden is getting the ul back?

dippas
  • 58,591
  • 15
  • 114
  • 126
Rajesh V R
  • 3
  • 2

1 Answers1

0

overflow: hidden is not getting the ul back here. The color of the <a> tag inside the <li> are white because of which they are not visible. Also because of float:"left" on the <li>, the background-color:"#333" of the <ul> is not visible. All the css properties together are causing the effect.

kokila
  • 294
  • 2
  • 8
  • Thank you for the response. I understand that the list items are not seen as the colour is white. I would like to understand-as the li element is floated, the ul container no longer has any content & it just becomes a line as the ht becomes 0, how does the overflow:hidden property undo's that that is how we are seeing the bg again. – Rajesh V R May 31 '20 at 18:18
  • Because of the floated elements. To understand it better visit https://stackoverflow.com/questions/43007817/why-do-i-have-to-add-overflowhidden-to-make-the-navigation-bar-visible-on-the and https://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el – kokila May 31 '20 at 18:29
  • got it. Thank you. – Rajesh V R May 31 '20 at 18:44