What is the use of overflow: hidden; when making a navigation bar using float in CSS?

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;

li {
  float: left;

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

li a:hover {
  background-color: #111;

Besides the code snippet above, there is just an unordered list defined with four list items
where four links ( anchor ) lies inside of each one in HTML document.
My question is why we use overflow: hidden; ( or auto ), I mean where does overflow occur here so that we use this property. Some people suggested me to play around with the values of overflow so that I could understand but I didn’t. Why does it not work properly when overflow property is not used?

edit: Could you please tell me the reason of downvoting the post? I am asking a question here what the heck do you expect?