What effect does overflow:hidden has in this code?

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

Why when overflow:hidden is added in .navbar it works and without it the left side is white and the text is on the right side? Also, how and what is the purpose of applying overflow here when this is what I read about the attribute:

Note: The overflow property only works for block elements with a specified height.

Answer 1

First of all, when you remove overflow:hidden from the navbar, it makes the menu items disappear because there is no background in .navbar at that time and both a and button tags has color: fff; which is same as page background color.

Now, why we need overflow:hidden; in .navbar

Its because all the child inside .navbar has float property associated with them and floated elements don't take any space in normal document flow. Now if the child elements are not taking any space then the height property for parent (.navbar) is 0.

To maintain the height property of parent class when child classes are floated, we use overflow: hidden; property

Hope it help

Answer 2

It's all because of block formatting context
If you remove overflow: hidden everything for that element appears on left because children elements have float property and there is no place where float is cleared.

For block formatting context you can refer this answer Why does overflow hidden stop floating elements escaping their container?

Also please refer : Parent Height doesn't follow their float children