BFC是最稳妥修复方式，通过overflow:hidden或display:flow-root让元素建立独立渲染区域以避开浮动遮盖；避免用clear:both、z-index或脱离文档流的方案。
浮动导致边框被遮盖的典型表现
元素设置了 border，但顶部或左侧边框“消失”——不是没渲染，而是被上方/左侧的浮动元素视觉覆盖。常见于侧栏+主内容布局中，主内容容器有 border 却只显示右、下边框。
直接触发 BFC 是最稳妥的修复方式
BFC（块级格式化上下文）会让元素生成独立渲染区域，自动避开浮动影响，同时保留边框完整可见。关键不是“清除浮动”，而是让被遮盖元素自己建立隔离环境。
-
overflow设为hidden、auto或scroll（推荐hidden，语义清晰且无滚动副作用） -
display设为flow-root（现代写法，Chrome 64+/Firefox 58+ 支持，语义最准确） - 避免用
position: absolute或float: left—— 这会脱离文档流，反而加剧遮盖问题 - 不要依赖
clear: both：它只影响后续元素位置，不解决当前元素边框被盖的问题
z-index 不能单独解决这个遮盖问题
z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）生效。如果被遮盖元素是普通 div，加 z-index 完全无效；强行加 position: relative 又可能引发新布局偏移，得不偿失。
- 只有当元素已设
position且处于同一层叠上下文时，z-index才起作用 - 浮动元素默认在 z 轴上不占据特殊层级，它只是“视觉上压过去”，不是真正更高层叠等级
- 优先选 BFC 方案，更轻量、更可预测
兼容性与细节陷阱
flow-root 写法干净，但 IE 完全不支持，旧版 Safari（overflow: hidden 是最稳的选择——但要注意它会裁剪溢出内容（比如带负 margin 的子元素或绝对定位偏移）。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必检查是否有子元素因
overflow: hidden被意外截断 - 若父容器已有
overflow: visible且不能改，可用伪元素清除法：::after { content: ""; display: table; clear: both; }，但它不触发 BFC，仅靠清除浮动来重排，对边框遮盖的修复不如 BFC 可靠 - 边框是否“被遮盖”，本质是渲染顺序和 stacking context 的交互结果，不是样式没生效——调试时别浪费时间查
border值是否写错
overflow: hidden 没用”，其实是因为父级已有 overflow: visible 且未显式设置，或者用了 display: inline-block 这类不触发 BFC 的值。真要排查，打开 DevTools 看 computed display 和 overflow 值最直接。 
