直接触发bfc可解决非浮动元素被浮动元素遮挡问题：给被遮挡元素加overflow:hidden或display:flow-root，使其避开浮动区域；overflow:visible不触发bfc，且避免滥用overflow:hidden导致弹窗裁剪。
非浮动元素被浮动元素遮挡，直接触发BFC
浮动元素脱离文档流后，后续非浮动元素会“无视”它的存在，导致文字被盖住、段落顶部塌陷、行高错乱。这不是 z-index 能解决的问题，而是文档流断裂的典型表现。最直接有效的办法，是让那个被遮挡的非浮动元素自己成为 BFC 容器。
- 给它加
overflow: hidden或overflow: auto—— 兼容性最好，所有浏览器都认，但注意：如果它内部真有需要溢出显示的内容（比如下拉菜单、tooltip），会被裁剪 - 现代项目优先用
display: flow-root—— 语义清晰、不裁剪溢出、无副作用，Chrome 58+/Firefox 53+/Safari 10.1+/Edge 16+ 都支持 - 别用
overflow: visible，它不触发 BFC；也别对 body 或全站 wrapper 盲目加overflow: hidden，容易意外截断弹窗
为什么 clear: both 不如 BFC 可靠
clear: both 是让当前元素“避开浮动”，但它只控制单个块的位置，不修复父容器塌陷。一旦后续还有其他非浮动元素，或者响应式断点里浮动状态变化，就得反复加 clear，维护成本高。
-
clear只对块级元素生效，display: flex子项、inline元素加了也没用 - 如果浮动元素是
float: right，而你只写clear: left，它根本不会下移 - BFC 是渲染层面的隔离，只要非浮动元素自己成了 BFC，就天然避开所有外部浮动，不管前面有几个 float 块、方向如何
display: flow-root 和 overflow: hidden 的实际差异
两者都能触发 BFC，但行为边界完全不同：
-
overflow: hidden会让超出容器的内容不可见，哪怕只是阴影偏移几像素、下拉菜单向下展开一丢丢，也会被硬裁掉 -
display: flow-root完全不干预溢出行为，只做一件事：让容器重新包裹内部浮动子元素，并为后续内容腾出正确空间 - 兼容性上，
flow-root在 IE 中完全无效，老安卓 WebView（如 Android 4.4）也不支持；若必须兼容，可用@supports (display: flow-root) {}做降级
混用 float 和 BFC 容易踩的坑
常见错误是给浮动元素自身加 BFC 触发方式，比如 .float-box { display: flow-root; } —— 这会让它既浮动又形成独立格式化上下文，结果不可预测，且违背设计意图。
- BFC 应该加在**被影响的非浮动元素**上，不是加在浮动元素上
- 避免对同一个元素同时写
float: left和display: flow-root，后者会覆盖前者，但开发者可能误以为 float 还在起作用 - 如果非浮动元素本身是
display: inline-block，加overflow: hidden会把它变成块级 BFC，但宽度会收缩到内容尺寸，需额外补width: 100%
position: relative + z-index，或者直接切到 flex/grid。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
