父元素 height 为 0 时 resize 事件不会触发，因其失去可调整大小前提；display: flow-root 是最可靠的现代解决方案，能创建 BFC 并支持 resize，兼容主流浏览器。
父元素 height 为 0 时 resize 监听根本不会触发
resize 事件只在元素自身尺寸**实际变化**且该元素是可调整大小的（resize: both 或 resize: horizontal/resize: vertical）时才触发。浮动导致父容器高度塌陷为 0，它就失去了「可调整大小」的前提——浏览器压根不把它当一个有渲染区域的块来监听。用 getComputedStyle(el).height 查会返回 "0px"，el.offsetHeight 是 0，此时哪怕子元素再高，resize 也永远不会 fire。
overflow: hidden 能让 resize 工作，但前提是父元素没被其他规则锁死高度
加 overflow: hidden 的本质是触发 BFC，让父容器重新包含浮动子项、获得真实高度。但以下情况会让它失效：
- 父元素写了
height: 200px或max-height: 300px—— 尺寸被硬编码，BFC 也撑不开 - 父元素是
position: absolute且没设top/bottom—— 高度计算逻辑异常，resize不响应 - 父元素已设
display: flex或display: grid——overflow在这些 display 模式下不触发传统 BFC，清除无效
现代替代方案：用 display: flow-root + resize 更可靠
display: flow-root 是 CSS 专门为解决这类问题设计的值，它创建 BFC 且不改变溢出行为，比 overflow: hidden 更干净：
- 一行生效：
.parent { display: flow-root; resize: both; overflow: auto; } - 不会意外裁剪
position: absolute子元素或阴影 - 兼容性足够：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+；若需支持 IE11，得退回伪元素
::after清除法 - 注意：如果父元素已有
display: flex，再写flow-root会被忽略 —— display 值互斥
别依赖 JS 手动触发 resize，那只是掩盖问题
有人试过在浮动子元素加载完后调用 el.dispatchEvent(new Event('resize'))，这毫无意义。原生 resize 是由浏览器布局引擎在尺寸重排（reflow）后自动派发的，手动 dispatch 不会触发重排，也不会让父元素突然“感知”到子项高度。真正要做的，是让父容器在 CSS 层面先恢复对浮动子项的高度感知 —— 否则所有基于尺寸的监听（resize、IntersectionObserver、getBoundingClientRect()）都会失准。
立即学习“前端免费学习笔记（深入）”；
