直接用 display: flow-root 触发 BFC 最佳，它天然创建无副作用的独立格式化上下文，兼容现代浏览器；overflow: hidden 易裁剪内容，clearfix 依赖伪元素且维护成本高，IE11 需降级处理。
浮动元素导致父容器高度塌陷怎么办
直接给父容器触发 BFC 就能解决，overflow: hidden、display: flow-root 或 float: left 都行，但别无脑套用 clearfix。
常见错误是给父容器加了 clearfix 类却忘了它依赖伪元素和 clear: both，而现代浏览器里更推荐用 display: flow-root——它天然创建 BFC，不带副作用，也不影响 overflow 行为。
-
overflow: hidden确实有效，但会意外裁剪溢出内容（比如下拉菜单、阴影、绝对定位子元素超出边界） -
display: flow-root是目前最干净的解法，兼容性到 Chrome 64+/Firefox 53+/Safari 10.1+，IE 完全不支持 -
clearfix的经典写法（::after+content: ""+clear: both）仍可用，但需确保伪元素被正确渲染（比如不能加display: none）
为什么 position: absolute 元素被浮动元素遮挡
因为浮动元素会改变文档流布局，但不会改变层叠上下文；当 position: absolute 元素没有明确 z-index，且父容器没建新层叠上下文时，它可能被后出现的浮动块“盖住”。
这不是浮动本身“挡住”了绝对定位，而是它们在同一个层叠上下文中按文档顺序排列，浮动块渲染在后，视觉上就压在了前面的绝对定位元素上。
- 最稳的解法：给绝对定位元素的**最近定位祖先**加
z-index（哪怕只是z-index: 0），强制创建新层叠上下文 - 避免把
position: absolute直接挂在浮动兄弟元素的父容器下，容易受浮动干扰；优先挂到body或一个明确的position: relative容器上 -
will-change: transform或transform: translateZ(0)也能触发层叠上下文，但属于“副作用方案”，不推荐作为首选
display: flow-root 和 clearfix 性能差异大吗
实际项目中几乎感知不到差异，但原理不同：flow-root 是 CSS 规范定义的 BFC 创建方式，浏览器原生支持，无需生成伪元素；clearfix 依赖 ::after 伪元素和 clear 计算，多一次渲染树插入和布局重排。
不过这点开销在现代引擎里微乎其微，真正要注意的是维护成本——clearfix 需要全局类名管理、CSS 文件引入、HTML 中显式添加 class；而 flow-root 直接写在样式里，语义清晰，一劳永逸。
- 如果项目要兼容 IE11，只能用
clearfix或overflow: hidden（注意裁剪风险） - 用 PostCSS 插件（如
postcss-flow-root）可自动降级flow-root到display: block+overflow: hidden，但降级后仍要面对裁剪问题 - 不要为了“性能”硬套
flow-root到所有容器——只在真正需要包裹浮动子元素时才用
清除浮动后，margin 折叠又出现了
触发 BFC 后，父容器会变成一个独立格式化上下文，内部的 margin 折叠照常发生，但父容器和外部元素之间的 margin 不再折叠。所以你看到的“又出现”，其实是原本被浮动破坏的正常 margin 行为恢复了。
比如浮动时父容器高度塌陷，子元素的 margin-top 会一直顶到上一个兄弟元素底部；一旦清除浮动，父容器有了高度，子元素的 margin-top 就只跟父容器内容区起作用，看起来像“突然多了一截空隙”。
- 检查是否误把
margin写在了浮动子元素上——浮动元素的margin不参与常规文档流折叠，清除浮动后它才真正生效 - 如果想保留原有视觉间距，把
margin移到父容器上，而不是浮动子元素上 - BFC 容器内的第一个子元素的
margin-top会与容器边界粘连，这是正常行为；可用padding-top或border-top代替
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
