footer div的background-color样式在浏览器中无法正常显示

通用排查路径（按优先级从高到低） #

• 打开开发者工具Elements面板，选中目标.footer元素，查看右侧Styles面板：
  • 检查你写的background-color: #009DDC规则是否被划了删除线，如果有，说明存在优先级更高的样式覆盖了该属性，顺着覆盖来源往上找对应规则调整优先级即可
• 切换到Computed面板，查看两个核心属性：
  • 确认background-color的最终计算值是不是你设置的#009DDC，如果不是就是被覆盖
  • 查看元素的height计算值，如果值为0，说明元素本身没有可渲染背景的高度区域，这是最常见的诱因
• 检查HTML结构合法性：浏览器对不符合嵌套规范的标签会自动修正DOM结构，可能导致你写的选择器和实际渲染的DOM不匹配
• 检查元素定位相关属性：如果元素设置了z-index为负值被其他元素遮挡、或者本身/父元素设置了opacity: 0、transform相关属性导致层叠上下文异常，也会出现背景看不到的情况

对应你提供代码的根因 #

你的代码存在两个直接导致问题的点：

1. 高度塌陷：.footer内部的第二个li设置了float: right，浮动元素会脱离普通文档流，父元素在没有触发BFC、也没有手动清除浮动的情况下，计算高度时不会把浮动元素算进去，最终父元素高度为0，背景色没有渲染区域
2. 标签嵌套违规：<li>标签的合法父元素只能是<ul>/<ol>/<menu>，你直接把li放在div下，浏览器会自动重构DOM结构，可能打乱你预期的层级关系

修复代码 #

先修正HTML结构，再通过清除浮动解决高度塌陷：

.footer {
  margin: 20px;
  background-color: #009DDC;
}
/* 清除浮动通用clearfix方案，不会裁剪溢出内容 */
.footer::after {
  content: "";
  display: block;
  clear: both;
}
.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<div class="footer">
  <ul>
    <li>&copy; Cedar Flute, 2022.</li>
    <li style="float:right">Web Design: Leagh Branner.</li>
  </ul>
</div>

临时快速验证高度塌陷问题的方法：给.footer临时加个固定高度比如height: 100px，如果加完背景色立刻显示，就100%是高度塌陷导致的问题。

内容的提问来源于stack exchange，提问作者leaghbranner