为什么CSS浮动元素会使父容器border不显示？

父容器 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 面板里的伪元素节点确认是否激活

最容易被忽略的是：所有这些方案都只对浮动元素的直接父容器有效；如果浮动嵌套了多层，每一层需要闭合的父容器都得单独处理。