父元素边框“消失”是因height为0而非border失效；display: flow-root是最优解，overflow:hidden和伪元素清除法各有局限且需注意细节。
父元素边框“消失”是因为 height 计算为 0
不是 border 样式没生效，而是父元素 height 实际是 0px —— 没有高度，border 就没地方画。DevTools 的 Computed 面板里一眼就能确认：如果 height 是 0，那 border、background-color、padding 全部视觉失效，后续兄弟元素还会往上顶，覆盖浮动区。
根本原因是：float: left 或 float: right 的子元素完全脱离文档流，父容器在布局计算时直接忽略它们的高度贡献，哪怕子元素本身有 height: 200px。
display: flow-root 是最干净的现代解法
它专为解决这类问题设计，语义明确、副作用极少：
- 触发 BFC，让父容器重新包含浮动子元素高度
- 不裁剪
position: absolute子元素（比如下拉菜单、tooltip） - 不会意外触发滚动条，也不影响
box-shadow渲染 - 写法极简：
.parent { display: flow-root; border: 1px solid #333; }
兼容 Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+；若需支持 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 就失效
DevTools 默认不显示 ::after，需手动展开 Styles 面板里的伪元素节点确认是否激活。真正容易被忽略的是：所有这些方案都只对浮动元素的**直接父容器**有效；如果浮动嵌套了多层，每一层需要闭合的父容器都得单独处理 —— 漏掉任意一层，塌陷就会继续向上传导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
