父容器 height 为 0px 是 border 不显示的直接原因，源于浮动元素脱离文档流导致父容器高度塌陷；display: flow-root 是最干净的修复方式，强制创建 BFC 并自动撑开高度。
父容器 height 为 0px 是 border 不显示的直接原因
不是 border 写错了，也不是颜色没生效，而是父容器计算出的高度就是 0px。浮动元素（float: left 或 float: right）会脱离普通文档流，父容器在布局时“看不见”它们，自然无法把它们的高度纳入自身高度计算。
用 DevTools 的 Computed 面板直接看 height 值：如果显示 0px，基本就能锁定是浮动塌陷问题。此时 border、padding、background 全部失效——没有高度，这些样式就无处渲染。
- 即使子元素设置了
height: 200px，父容器仍可能显示height: 0px - 后续兄弟元素会上移，覆盖原本浮动区域，进一步掩盖问题
- 别急着调
border-color，先确认 height 是否真实存在
display: flow-root 是最干净的修复方式
display: flow-root 是专为解决这类问题设计的值，语义明确、无副作用、不裁剪内容、不触发滚动条，且已覆盖主流浏览器（Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+）。
写法极简：.parent { display: flow-root; }。它强制父容器建立一个新的块级格式化上下文（BFC），重新包含所有子元素（包括浮动项），高度自动撑开。
立即学习“前端免费学习笔记（深入）”；
- 比
overflow: hidden更安全：不会意外裁剪position: absolute子元素 - 比伪元素清除更轻量：不用写
::after、不用记content和display: table - 如果项目需兼容 IE11 及更早版本，才考虑降级方案
overflow: hidden 能快速生效但有隐藏风险
overflow: hidden 是最快见效的方案，原理也是触发 BFC，兼容性好（IE8+），代码只有一行。
但它本质是“让溢出内容不可见”，一旦父容器内有下拉菜单、tooltip、弹窗等 position: absolute 元素超出边界，就会被裁剪——这个副作用在开发阶段容易被忽略，上线后才暴露。
-
overflow: auto更保守，但会多出滚动条，UI 上可能穿帮 -
overflow: visible（默认值）完全无效，不触发 BFC - 若父容器本身是
display: inline或display: inline-block，overflow属性不生效
伪元素清除法必须满足三个硬条件
.clearfix::after 方案通用性强，但漏掉任意一个关键声明就失效：
-
content: ""必须存在（空字符串也行），否则伪元素根本不渲染 -
display: block或display: table不能省——仅clear: both不起作用 - 必须加在浮动子元素的**直接父容器**上，套多一层 wrapper 或加错位置都白搭
- DevTools 默认不显示
::after，需手动展开 Styles 面板里的伪元素节点确认是否激活
最容易被忽略的是：所有这些方案都只对浮动元素的直接父容器有效；如果浮动嵌套了多层，每一层需要闭合的父容器都得单独处理。
