动态加载时浮动导致父容器塌陷，需每次插入后重应用.clearfix类或改用display: flow-root；overflow: hidden因裁剪和不响应动态内容而不适用。
动态加载内容时，如果子元素用了 float，父容器高度仍会塌陷——这不是缓存或 JS 执行顺序问题，而是浮动本身脱离文档流的固有行为。必须在每次插入新浮动元素后，重新触发清除逻辑，否则后续内容会错位或重叠。
为什么 overflow: hidden 不适合动态加载场景
给父容器设 overflow: hidden 确实能一次性触发 BFC、撑开高度，但存在两个硬伤：
- 新插入的浮动元素若宽度超出容器，会被直接裁剪，且无提示
- 若后续 JS 动态追加内容（比如分页加载更多），
overflow不会“重新计算”或“响应式更新”，它只在初始渲染时生效一次 - 配合
position: absolute或transform时可能失效（尤其在 Safari 中）
用 .clearfix 类 + 动态重应用才是可靠解法
核心是让清除逻辑绑定到 DOM 变化本身，而不是依赖初始 CSS 声明。推荐做法：
- 定义标准
.clearfix::after规则（含display: table或block，两者都有效） - 每次通过 JS 插入浮动子元素后，**显式给父容器重新添加
.clearfix类**（即使它已有该类，也要 toggle 或 force re-apply） - 避免仅靠 class 存在就假设清除生效——浏览器对伪元素的重绘不总是主动触发，尤其在快速连续插入时
示例 JS 片段：
function appendFloatItem(parent, item) {
parent.appendChild(item);
// 强制刷新 clearfix
parent.classList.remove('clearfix');
void parent.offsetWidth; // 触发重排
parent.classList.add('clearfix');
}
现代替代方案：优先考虑 display: flow-root
如果项目不需要支持 IE，display: flow-root 是比 .clearfix 更干净的选择，它原生创建 BFC，且对动态内容天然友好：
- 无需任何伪元素或额外 class，写一次 CSS 即永久生效
- JS 插入新浮动元素后，父容器自动重新计算高度，无须手动干预
- 注意：它会重置 margin 折叠行为，若原有布局依赖父子 margin 合并，需额外调整
只需一行：
.dynamic-container { display: flow-root; }
真正容易被忽略的点是：清除浮动不是“设一次就完事”的样式，而是要和 DOM 生命周期对齐。动态内容下，CSS 类或 display 值的变更必须与元素插入同步发生，否则视觉错乱几乎必然出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
