Nastusya Posted June 1, 2022 Share Posted June 1, 2022 (edited) Hello. I don't understand, why ul element has a style overflow: hidden? And if I delete it, then background-color won't work, why? Could you tell please how does it work? Thank you in advance for your help. This example is from here:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu <head> <style> ul { list-style-type: none; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; text-decoration: none; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> Edited June 1, 2022 by Nastusya Link to comment Share on other sites More sharing options...
Ingolme Posted June 2, 2022 Share Posted June 2, 2022 Elements with "float" are ignored when calculating the height of their parent. The parent will not expand to contain these elements. Overflow forces the parent to take the floated elements into account. Other solutions involve adding "clear:both" to an element beneath the floated elements. This is sometimes done with the ::after pseudo-element like this: ul::after { content: ""; display: table; clear: both; } 1 Link to comment Share on other sites More sharing options...
Nastusya Posted June 2, 2022 Author Share Posted June 2, 2022 Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now