父级背景色不显示是因为浮动子项脱离文档流导致父容器高度塌陷为0px；display: flow-root是最干净的修复方式，可触发bfc并正确计算高度。
父级背景色不显示，不是样式没生效，是它的 height 被浏览器算成了 0px —— 浮动子项脱离文档流，父容器根本“看不见”它们的高度，背景自然无处可绘。
为什么 float 会让父容器高度塌陷为 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕每个导航项高 48px，只要父容器内部没有其他非浮动内容（比如纯文本、div 块），它的 offsetHeight 就大概率是 0。
常见连带现象包括：
- 后续兄弟元素向上“塌陷”，紧贴在浮动区域下方
- 父容器的
padding和border还在，但中间区域没高度，背景图/色画不出来 - 用开发者工具检查
Computed > height，会明确看到0px
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同时用在一个元素上——后者会让flow-root失效 - 如果父容器原本是
inline或inline-block，得先加display: block再设flow-root
伪元素清除法（.clearfix）仍需谨慎使用
若必须兼容老浏览器（如 IE11 或旧版 Safari），::after 清除仍是可行方案，但漏掉任一条件就会失效：
- 必须写
content: ""（空字符串，不能省略） - 必须设
display: table（block在某些场景下会因 margin 折叠失效） - 必须加
clear: both - 父容器不能是
display: inline或inline-block，否则伪元素不参与布局
最小可靠写法：
.nav::after {
content: "";
display: table;
clear: both;
}
别再用 float 做导航或网格布局了
浮动本意是让文字环绕图片，不是做导航栏或卡片网格的布局工具。只要不强求兼容 IE8 及更早版本，直接换现代方案更省心：
-
display: flex：一行代码撑高父容器，justify-content控制对齐，gap管理间距 -
display: grid：适合复杂导航（比如带下拉、图标、徽标组合）
Flex/Grid 天然不脱离文档流，父容器自动包裹子项，background-color 从一开始就不会丢。混用 float 和新布局模型反而容易引发意外交互，比如浮动子项在 flex 容器里会被忽略——这是规范行为，不是 bug。
真正容易被忽略的是：浮动塌陷往往不是孤立问题，而是和 JS 动态插入内容、CSS-in-JS 注入顺序、或图片/字体加载延迟耦合在一起。修完 CSS，记得检查 DOM 更新后是否需要手动触发一次 offsetHeight 读取来强制重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
