1

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.

LearningMath
  • 851
  • 4
  • 15
  • 38

2 Answers2

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

Rohit Verma
  • 299
  • 1
  • 8
  • Why does float need to be cleared in this example when we want them to be on the left? If we clear the float we'll get the elements stacked one over another. Thanks. – LearningMath Oct 27 '17 at 04:22
  • You can read more of clearing floats [here](https://css-tricks.com/the-how-and-why-of-clearing-floats/) and [here](https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do). I have created a fiddle for reference with the mentioned example. https://jsfiddle.net/3dw9y040/ Please check I have added `
    `     – Rohit Verma Oct 27 '17 at 04:29
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

Rajan Benipuri
  • 1,772
  • 1
  • 9
  • 21