el código contiene código html y código css. Aquí en html tengo un elemento div antepasado con navegación de nombre de clase y el niño tengo una lista desordenada. Cuando no configuro la propiedad para flotar: derecha o izquierda, toma el color de fondo del antepasado. sin embargo, cuando configuro la propiedad del elemento secundario para flotar: derecha o izquierda, no se muestra el color de fondo.
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: yellow; } .container {} .navigation { background-color: red; } ul { /* here I am not setting the float property and it is taking the ancestor background color */ } /* CSS changes I made */ ul { /* here I am setting float property to right */ float: right; } <body> <div class="container"> <div class="logo"> <img src="https://dummyimage.com/300x100/000/fff"> </div> <button type="button" class="nav-toggler"> <span></span> </button> <nav class="navigation"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> </body>el color de navegación en el fondo se oculta. ¿Puede ayudarme por qué no muestra el color de fondo rojo cuando cambio la propiedad ul a float: right?
Esto se debe a que no borraste tu flotador
Cada vez que termine su trabajo, debe borrar el efecto de flotación y, si no lo hace, el archivo sin procesar se dejará abierto y el navegador no podrá calcular la altura de su elemento, por lo que la altura de su elemento será 0 y, por lo tanto, no podrá ver su fondo.
<nav class="navigation"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> <div class="clear-fix" ></div> </nav> .clear-fix{ clear: both; }