父容器高度塌陷导致边框“消失”，修复关键是触发BFC使父容器包裹浮动子元素；推荐用display: flow-root，需确保其为块级、无position: absolute冲突，且兼容现代浏览器。
边框“消失”不是样式没生效，是父容器高度塌陷为 0，border 被画在了看不见的地方——修复核心是让父容器重新包裹浮动子元素。
为什么加了 overflow: hidden 边框还是不显示
常见误判：以为加了就一定生效。实际可能卡在这几个点上：
-
overflow属性对display: inline或display: inline-block的父容器无效，必须先确保它是块级（比如加display: block） - 父容器本身有
height、max-height或position: absolute等限制，强行压死了高度计算 - 浮动子元素被
visibility: hidden或opacity: 0遮盖，看起来像边框没了，其实只是内容不可见 - 开发者工具里检查
computed height，如果是0px，说明 BFC 没真正触发；再看display值是不是被其他规则覆盖成了inline或flex
用 display: flow-root 替代 overflow: hidden 的实操细节
这是现代项目最推荐的写法，语义明确、无裁剪副作用，但要注意兼容边界和组合陷阱：
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 都支持，IE 完全不支持
- 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 如果父容器原本是
display: table-cell或display: flex，加flow-root会覆盖原有布局行为，需先确认是否真需要浮动 - 伪代码示例：
.container { display: flow-root; border: 1px solid #333; }—— 一行解决，不用额外 class 或伪元素
多层嵌套浮动时，为什么 clear: both 加了也没用
clear: both 只作用于同级前一个浮动元素，不会穿透父容器。嵌套越深，漏掉某一层 BFC 触发就越容易失效：
立即学习“前端免费学习笔记（深入）”；
- 给最内层子元素加
clear: both，外层父容器依然塌陷，因为它的高度不依赖子元素的 clear 行为 - 逐层加
clear必须保证每层都有一个**同级、末尾、块级**的清空元素，结构稍错就断链 - 更可靠的做法：每一级浮动父容器都直接设
display: flow-root，而不是靠子元素“清理” - 如果某层父容器已是
display: flex或display: grid，那它内部的float本就不参与布局，此时加clear或flow-root都是冗余操作
真正容易被忽略的是：边框是否“消失”，最终得靠 offsetHeight 和 getComputedStyle(el).height 来验证，而不是肉眼判断。哪怕写了 border，只要父容器 computed height 是 0，它就注定画在虚空里。
