给非浮动元素触发bfc（如overflow:hidden或display:flow-root）可使其避开浮动元素，避免遮挡；flex布局中margin-bottom失效是因align-items:stretch拉高导致，应改用align-items:flex-start或gap。
浮动元素盖住后面非浮动内容怎么办
直接给后面的非浮动元素触发 BFC，就能让它自动避开浮动区域，而不是靠 margin 或 clear 硬推。BFC 是浏览器渲染时的独立布局上下文，一旦开启，它内部的盒子就不会和外部浮动元素重叠。
- 常见错误现象：
div浮动后，后面紧挨着的p或section文字被遮挡、顶部塌陷、行高错乱 - 最稳的触发方式是给非浮动元素加
overflow: hidden（或auto），别用visible—— 它不触发 BFC -
display: flow-root更语义化，现代浏览器支持良好，但 IE 完全不认，项目要兼容 IE 就得 fallback 到overflow - 避免对 body 或大容器滥用
overflow: hidden，可能意外裁剪弹窗、下拉菜单等绝对定位内容
为什么 float + inline-block 不总能并排
因为浮动元素脱离文档流，而 inline-block 元素仍受父容器行框约束，两者对齐逻辑不同，容易出现底部对不齐、间隙忽隐忽现等问题。
- 典型场景：导航栏里一个
float: leftlogo + 若干display: inline-block菜单项 - 参数差异：
vertical-align对inline-block有效，但对浮动元素无效；浮动元素默认vertical-align: baseline不起作用 - 更可靠的做法是统一用 BFC：把所有并排项都包进一个
display: flex容器，或让它们各自成为 BFC（如加overflow: hidden） - 性能影响小，但反复切换
float和inline-block容易让维护者困惑，尤其在响应式断点里混用时
flex 替代 float 后 margin-bottom 失效了
不是失效，是 flex 容器里的子元素默认 align-items: stretch，会拉高高度，导致你原来靠 margin-bottom 控制的垂直间距被“撑开”或视觉上消失。
- 错误现象：把
float: left改成display: flex后，原本有margin-bottom: 20px的卡片突然贴底、间距变小 - 解决方法优先试
align-items: flex-start，再补margin-bottom；或者改用gap（更干净，但 IE 不支持） - 兼容性注意：
gap在 flex 布局中从 Chrome 84 / Firefox 63 开始支持，Safari 14.1+，老版本必须回退到margin - 别在 flex 项上同时写
float—— 浏览器会忽略float，但开发者可能误以为它还在生效
BFC 区域里 overflow: auto 滚动条卡顿
不是 BFC 的问题，是 overflow: auto 触发了合成层（compositing layer），如果里面内容频繁重绘（比如动画、实时图表），滚动就容易掉帧。
- 使用场景：侧边栏菜单用了
overflow: auto实现局部滚动，但展开子菜单时滚动卡顿 - 先检查是否无意中开启了
will-change: transform或过度使用opacity动画，这些会让浏览器持续合成 - 可降级为
overflow: overlay（仅 WebKit），或加scroll-behavior: smooth反而有时更稳（因强制启用优化路径） - 真正要警惕的是嵌套 BFC：外层
overflow: hidden+ 内层overflow: auto，两层合成叠加，比单层更容易触发渲染瓶颈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
