父级背景不显示是因为浮动导致父容器高度塌陷为0px；display: flow-root是最干净的修复方式，可触发bfc使父容器正确包含浮动子项；现代项目应优先使用flex或grid替代浮动布局。
父级背景不显示，不是 background 没生效，是父容器 height 被算成了 0px —— 浮动的导航项脱离文档流，父容器根本“看不见”它们的高度。
为什么 float:left 的导航项会让父容器高度塌陷
导航栏常见写法是给 <li> 或 <a></a> 设 float: left 实现横排，但浮动元素会从文档流中抽离。父 <ul></ul> 或 <nav></nav> 在计算自身高度时，只看仍在流内的内容（比如纯文本、未浮动的块），而对这些浮动项“视而不见”。哪怕每个导航项高 48px，父容器的 offsetHeight 仍可能是 0。
此时 background-color 或 background-image 只作用于一个高度为 0 的区域，视觉上就是“背景消失了”。
- 用开发者工具检查父元素的
Computed > height，大概率看到0px - 后续兄弟元素（比如主内容区）会向上“塌陷”，紧贴在导航项下方，这是典型连带现象
- 父容器的
padding和border可能还在，但中间区域没高度，背景无处可绘
display: flow-root 是最干净的修复方式
它专为解决这类问题设计：触发 BFC（块级格式化上下文），强制父容器包含浮动子项，从而正确计算高度，且不附带副作用。
只需一行 CSS：
.nav {
display: flow-root;
background-color: #2c3e50;
}
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，2026 年主流项目可放心用
- 不会裁剪
position: absolute下拉菜单、tooltip 或 box-shadow - 不影响滚动行为，也不强制出现滚动条
- 比
overflow: hidden更语义化、更安全
伪元素清除法仍需谨慎使用
如果必须兼容老浏览器（如 IE11 或旧版 Safari），::after 清除仍是可行方案，但漏掉任一条件就会失效：
- 必须写
content: ""（空字符串，不能省略） - 必须设
display: table（block在某些场景下会因 margin 折叠失效） - 必须加
clear: both - 父容器不能是
display: inline或inline-block，否则伪元素不参与布局
最小可靠写法：
.nav::after {
content: "";
display: table;
clear: both;
}
别再用浮动做导航布局了
浮动本意是让文字环绕图片，不是做导航栏的布局工具。只要不强求兼容 IE8 及更早版本，直接换现代方案更省心：
-
display: flex：一行代码撑高父容器，justify-content控制对齐，gap管理间距 -
display: grid：适合复杂导航（比如带下拉、图标、徽标组合） - Flex/Grid 容器内，子元素即使写了
float也会被忽略——这是规范行为，不是 bug
真正容易被忽略的是：加了清除后背景回来了，但浮动仍在干扰 margin 折叠、z-index 层级、absolute 定位基准。修完背景，务必用开发者工具再扫一眼整体渲染是否如预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
