父元素边框“消失”是因为 height=0，浮动子元素脱离文档流导致父容器高度塌陷；display: flow-root 是现代标准解决方案，可触发BFC并包含浮动高度，兼容性良好，IE11需回退 overflow: hidden。
父元素边框“消失”，不是样式没生效，而是 height=0 —— border 没地方画。
为什么加了 border 却看不见
浮动元素（float: left 或 float: right）脱离文档流，父容器在布局计算时完全忽略它们的高度。即使子元素有 height: 200px，父元素的 computed height 仍是 0px。DevTools 的 Computed 面板里一眼就能确认：如果 height 是 0，那 border、background-color、padding 全部失效，后续兄弟元素还会往上顶，覆盖浮动区。
用 display: flow-root 一行修复
这是现代标准方案，专为解决此问题设计，语义明确、无副作用：
- 触发 BFC，让父容器重新包含浮动子元素高度
- 不裁剪
position: absolute子元素（比如下拉菜单、tooltip） - 不引发滚动条，也不影响
box-shadow渲染 - 兼容 Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
写法极简：
.parent { display: flow-root; border: 1px solid #333; }若需兼容 IE11 及更早版本，得额外加 overflow: hidden 回退。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 能用但有风险
它确实能撑开高度，原理是通过非 visible 的 overflow 值触发 BFC。但要注意：
- 内容超出时会被硬裁剪，
position: absolute元素可能被截断 - 若父容器本身是
display: inline-block或display: table-cell，overflow属性不触发 BFC，加了也白加 -
overflow: auto看似“更宽容”，但微小溢出（如字体下沉、负 margin）就可能意外触发滚动条，破坏对齐
仅当项目需支持 IE8+ 且无绝对定位溢出需求时，才考虑这个方案。
伪元素清除（.clearfix::after）容易漏关键点
很多人复制代码却无效，问题常出在漏掉以下任一条件：
-
content不能为空字符串（必须写成content: ""或content: " "） -
display必须设为table或block（display: table更稳，避免外边距折叠） -
clear: both缺一不可 - 必须加在浮动子元素的直接父容器上，套多一层 wrapper 就失效
示例（可靠写法）：
.parent::after { content: ""; display: table; clear: both; }DevTools 默认不显示 ::after，需手动展开 Styles 面板里的伪元素节点确认是否激活。
真正容易被忽略的是：所有这些方案都只对浮动元素的直接父容器有效；如果浮动嵌套了多层，每一层需要闭合的父容器都得单独处理 —— 漏掉任意一层，塌陷就会继续向上传导。
