父元素脱离文档流（如float、absolute、inline-block）或尺寸未明确（width/height为auto）或使用flex/grid布局时，overflow: hidden无法触发bfc包裹浮动子元素；推荐用display: flow-root替代。
父元素自身脱离文档流导致BFC触发失败
加了 overflow: hidden 却没包住浮动子元素，最常见原因是父元素自己已经脱离常规文档流——比如它本身设置了 float: left、position: absolute 或 display: inline-block。这些声明会让父元素失去“作为块级容器参与布局”的资格，BFC 就压根不会被触发。
实操建议：
- 检查 computed style 中的
display和position，确认父元素不是inline-block、absolute或fixed - 去掉父元素上的
float；若必须用定位，改用position: relative+overflow: hidden - 避免用
display: inline-block作父容器，换成display: block或更推荐的display: flow-root
父元素尺寸未明确，overflow失去裁剪依据
overflow: hidden 不是万能胶，它只在父元素有**确定边界**时才起作用。如果父元素宽高都是 auto（比如没设 width、height、max-width 等），浏览器无法判断“哪里算溢出”，自然不裁剪也不撑高。
典型现象：父容器在 flex 容器里、或被 transform / filter 包裹后，计算出的 width/height 变成 auto，overflow: hidden 就静默失效。
实操建议：
- 给父元素显式设置
width或max-width（哪怕只是width: 100%） - 避免在父元素上同时用
overflow: hidden和transform/will-change，它们会创建新层叠上下文，干扰 BFC 触发 - 用开发者工具看 computed style 的
width和height值，确认不是auto
现代布局下 overflow 不再触发传统 BFC
在 display: flex 或 display: grid 的父容器上写 overflow: hidden，它依然会隐藏溢出内容，但**不会让父容器重新包裹浮动子元素**——因为 flex/grid 容器本身不依赖传统 BFC 来计算高度，浮动子元素在其中行为异常，甚至可能被强制 inline 化。
这时你看到“高度没撑开”，不是 overflow 失效，而是浮动本身就不该出现在 flex/grid 里。
实操建议：
- 如果父容器已是
display: flex，就别给子元素加float；用margin、align-self或order控制位置 - 若必须兼容老代码，把浮动子元素用
display: block包一层，再放进 flex 容器 - 不要指望
overflow: hidden在 flex 容器里“清除浮动”，它根本不是设计来干这事的
display: flow-root 是更可靠的替代方案
display: flow-root 是专为解决这个问题而生的：它强制创建一个 BFC，且不带 overflow: hidden 的副作用（比如意外裁剪、隐藏滚动条）。但它在 IE11 及更早版本中完全不支持。
实操建议：
- 现代项目（Chrome 64+、Firefox 59+、Safari 15.4+）直接用
display: flow-root，语义清晰、无副作用 - 需要兼容 IE11 时，回退到
overflow: auto（比hidden更安全，不强制裁剪） - 别用
zoom: 1或display: table这类老 hack，它们在标准模式下不可靠，且现代浏览器已弃用
真正容易被忽略的是：清除浮动的本质不是“清”，而是“包”——让父容器形成一个封闭上下文。很多失效问题，根源不在子元素怎么浮，而在父元素是否还“在线”。调试时第一眼要看 computed style，而不是反复改 ::after 的 content 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
