In this example of a drop down menu navigation bar at w3school, when all the li elements gets float: left;, the background-color of ul is gone, but adding overflow: hidden; brings it back. How does that work?
Asked
Active
Viewed 170 times
1
Vun-Hugh Vaw
- 180
- 1
- 7
-
Use display:inline; on li elements instead of float:left. That would solve your purpose without the overflow:hidden hack. – Nandita Sharma Oct 03 '18 at 04:01
1 Answers
1
The float: left removes li elements from the flow inside ul element. Since li are the only children of ul. 'ul' does not contain "anything" therefore no background. overflow: hidden is a technique similar to "clearfix" to force containment of float children.
Have a read on this link - Simple Tips on Containing Floats