包含HTML代码和CSS代码。这里在html中，我有一个祖先div元素类名称导航和子我有一个无序列表。当我没有将属性设置为浮动:右或左时，它会采用祖先的背景色。但是，当我将子元素的属性设置为float:right或left时，背景颜色不显示。
* {
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>背景中的导航颜色被隐藏。你能帮我为什么不显示背景色红色当我改变ul属性浮动:右
这是因为您没有清除float
当你的工作完成后，你需要清除浮动效果，如果你不这样做，raw将保持打开，浏览器无法计算元素的高度所以你的元素的高度将为0，因此你无法看到你的背景
<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;
}