浮动塌陷与动态插入顺序错乱导致视觉“阶梯”，本质是父容器未撑高且新浮动节点未参与浮动流；应设 display: flow-root 或确保正确插入方式与浮动样式。
这不是“阶梯状排列”，是浮动塌陷 + 动态插入顺序错乱导致的视觉错位，本质是父容器高度没撑开、新节点没正确参与浮动流。
动态插入的浮动 li 没触发父容器重排高度
浏览器对浮动元素的高度计算发生在首次渲染时；JS 动态插入新 li 后，若父容器未建立 BFC，它不会自动重新包裹这些新浮动子项——结果就是新 li 悬浮在旧内容右侧或下方，看起来像“阶梯”。
- 确认父
ul的computed display是block（不是flex或grid），否则float本身已被忽略 - 检查插入的
li是否真带float: left（常见于模板字符串漏写引号：`<li style="float:left">`</li>写成`<li style="float:left">`</li>） - 避免用
innerHTML +=追加，它会销毁并重建整个子树，丢失浮动上下文；改用insertAdjacentHTML('beforeend', ...)或appendChild()
display: flow-root 是最稳的动态场景解法
它不依赖插入时机或节点数量，只要父容器设了 display: flow-root，任何后续插入的浮动子项都会被自动纳入高度计算。
- 写法极简：
.list-container { display: flow-root; } - 兼容性够用：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，老版本可用
@supports降级 - 比
overflow: hidden安全：不会意外裁剪position: absolute弹层或box-shadow
别信“浮动块高度递增”就能做出阶梯效果
你看到的“阶梯”，大概率不是设计意图，而是浮动错位的副作用。真正用浮动做阶梯排版，需要严格满足：div.step 必须左浮动、height 显式递增、且文字节点必须紧随其后（不能包在 <p> 里）、不能有空格或换行——这种结构在动态加载中几乎不可控。
立即学习“前端免费学习笔记（深入）”；
- 动态 JS 插入时，HTML 字符串里多一个换行或空格，就会让文字触发新行，阶梯立刻断裂
- 浮动块若没设
width，宽度由内容撑开，不同设备下四舍五入偏差会导致错位放大 - 现代项目里，这种效果该用
display: grid的grid-row-start或transform: translateX()实现，而非硬扛浮动
真正容易被忽略的是：所谓“阶梯”，往往是多个问题叠加的结果——父容器没 BFC、插入方式破坏了渲染流、浮动样式漏写、又误把错位当效果。先修高度塌陷，再谈排版意图。
