Can someone explain the code (use of overflow when making horizontal navigation with float)?

Question

I didn't understand the use of overflow: hidden; in the code. What does unordered list have to do with overflow?

Also, float is set to left for all <li> elements, so does that mean, that all the <li> elements should be pushed to the left inside the container according to the html document flow ( who comes first in the html doc, is pushed to the left first )?

https://code.sololearn.com/WxjfByfcf0pB/#html

Answer 1

overflow: hidden;
makes the overflow to stop. Or to not float the list items in your case since u used float.

li{float:left}...
makes all the list items float left. Thus u can see only one list becuz they overflow on top of one another, like e.g.
when u stack 📚 books one over another. From top u can only see the top view.

When u use overflow hidden the stacking of books or the overflow stops. So they float: left but not on below the other.