the code contains html code and css code. Here In html I have an ancestor div element with class name navigation and the child I have an unordered list. When I do not set the property to float:right or left it takes the background color of ancestor. however when I set the property of child element to float:right or left the background color is not displayed.
* {
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>the navigation color in the background gets hidden. Can you please help me why its not displaying the background color red when I change the ul property to float:right
This is because you did not clear your float
Whenever your job is done you need to clear float effect and if you don't the raw will left open and browser can't calculate the height of your element so your element's height will be 0 and therefore you can't see your background
<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;
}