overflow: hidden 触发BFC会导致内容裁剪，display: flow-root是更安全的替代方案，它只触发BFC而不改变溢出行为，且兼容现代浏览器。
overflow: hidden 触发BFC后内容被裁剪
这是最常踩的坑：用 overflow: hidden 清除浮动时，若容器内有动画、下拉菜单、tooltip 或 position: absolute 子元素超出边界，它们会被直接截断，且不报错、不警告。
原因在于 overflow: hidden 不仅触发 BFC，还强制定义了容器的剪裁边界。BFC 本身不裁剪，但这个属性叠加后就产生了副作用。
- 动画位移（如
transform: translateX(100px)）超出左/右边界 → 消失 - 下拉菜单从 input 向上展开 → 被顶部裁掉
-
position: absolute定位在父容器外 → 不显示 - 调试时 inspect 元素能看到 DOM，但渲染层不可见
display: flow-root 是更干净的替代方案
display: flow-root 是专为解决“需要 BFC 又不想裁剪”的场景设计的 CSS 属性。它只触发 BFC，不改变 overflow 行为，也不影响滚动、定位或动画表现。
兼容性已覆盖所有现代浏览器（Chrome 69+、Firefox 59+、Safari 15.4+、Edge 79+），旧版 IE 不支持，但 IE 已退出主流支持范围。
立即学习“前端免费学习笔记（深入）”；
- 写法简单：
.parent { display: flow-root; } - 不会干扰子元素的
z-index层级计算 - 不改变默认的
overflow: visible，动画帧完整可见 - 比伪元素清除法更语义化，DOM 更干净
BFC 影响层叠上下文和 margin 合并
一旦父容器形成 BFC，它会成为新的层叠上下文起点，同时阻止与相邻兄弟元素的垂直 margin 合并——这两点容易被忽略，却直接影响布局对齐和间距一致性。
- 如果父容器用了
overflow: auto，其子元素的z-index将相对于该 BFC 计算，而非整个页面 → 多层弹窗可能错层 - 两个相邻的
div原本 margin-bottom / margin-top 合并为 20px，但若其中一个触发了 BFC，就会变成 20px + 20px = 40px → 间距意外变大 -
display: flex或display: grid也会创建 BFC，同样触发上述行为，不是overflow特有
伪元素清除法仍适用于老项目但需注意 zoom
在必须兼容 IE8 的遗留系统中，.clearfix:after 方式仍在使用，但 zoom: 1 是 IE hack，现代浏览器会忽略它；真正起作用的是伪元素本身的 clear: both 和 display: block。
- 不要漏写
content: ""—— 没有 content 的伪元素不会渲染，清除失效 - 避免给伪元素设 height 或 padding，否则会撑高父容器，破坏高度预期
- 若父容器本身是 flex 或 grid 容器，
clear属性无效 —— 这时 BFC 触发逻辑已不适用，应改用布局模型自身规则
