父容器背景色不显示是因浮动导致高度塌陷为0；首选display: flow-root触发BFC，其次用flex/grid布局替代浮动，避免清除浮动的补丁式修复。

直接设置 background-color 就能生效，但多数人调不出预期效果，问题通常出在「父容器没撑开」或「浮动元素未清除」上。

nav 或 ul 容器背景色不显示？检查浮动是否溢出

用 float: left 排列 li 时，ul 高度会塌陷，导致背景色“看不见”——这不是颜色没设上，是容器本身高度为 0。

• 必须给 ul 加 overflow: hidden 或 display: flex（推荐后者）来包裹浮动子项
• 若仍用 float，ul 上加 height 是临时解法，但响应式下易出错
• nav 标签本身是块级元素，但若内部全是浮动子项，它也会塌陷，同样要处理

hover 时背景变色但点击后恢复？需要手动管理 active 状态

CSS 的 :hover 是瞬时态，浏览器不会记住哪个链接被点中。要让“当前页”导航项保持高亮，得靠 HTML class 配合 CSS。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 在当前页面对应 a 标签上加 class="active"，比如：<a href="/" class="active">首页</a>
• CSS 中写 a.active { background-color: #0C8ED9; }，颜色值与 a:hover 一致或略深
• 服务端渲染或前端路由（如 React Router）可自动注入 active 类，纯静态页只能手写

IE6/7 下背景色错位？别信 display:block + width 组合

老版本 IE 对 display: block 的 a 元素计算宽度异常，尤其当父 li 没设宽时，a 会溢出或换行。

立即学习“前端免费学习笔记（深入）”；

• 稳妥做法：给 li 设固定宽（如 width: 120px），再让 a display: block 并 width: 100%
• 或退一步：对 a 也加 float: left（兼容性最强，但需注意清除后续浮动）
• 现代项目可忽略，但若维护旧系统，这个细节会卡住一整天

最常被忽略的是：背景色设在 ul 上，却忘了 li 默认有 padding 或 margin，导致视觉上颜色“断开”。统一清掉 ul, li { margin: 0; padding: 0; } 再调试，省一半时间。