根本原因是浮动使li脱离文档流导致序号区域未渲染，应停用float改用inline-block或flex布局——前者兼容ie8+且保持横排，后者天然形成bfc并确保序号可控。
ol 序号“消失”或错位，根本不是 list-style-type 没生效，而是浮动让 li 脱离文档流，浏览器压根不渲染序号所在区域——修样式不如先停用浮动。
为什么 float: left 会让 ol 序号全变成 “1” 或直接不显示
IE7 及更老浏览器中，li 一旦设了 float（或 height、display: inline-block），计数器状态就会静默丢失，所有项都渲染为第一个序号；现代浏览器虽不报错，但序号仍可能被挤出可视区或重叠文字，因为 list-style-position: inside 把序号塞进内容盒，而浮动元素的内容盒尺寸不可靠。
-
float让li脱离文档流 →ol高度塌陷 → 浏览器跳过外边距区域绘制（序号本该画在这里） - 即使显式写了
list-style-position: inside，对浮动li也无效 - 开发者工具里看到
list-style-type: decimal生效，但 computed 样式中list-style-position可能已退化为outside或被忽略
最快恢复序号：删掉 li 上的 float，改用 display: inline-block
不用动 HTML 结构，只改 CSS 就能让序号立刻回来，兼容 IE8+，且保留横排需求。
-
li { display: inline-block; vertical-align: top; }—— 替代float: left，li仍在文档流中，序号区域正常渲染 - 注意
inline-block元素间的空格会生成间隙，可用font-size: 0在ul上清除，或用注释消除 HTML 中的换行 - 别给
li设width或height，否则在 IE7 下仍会触发序号全为 “1” 的 bug - 如果用了全局
* { padding: 0; margin: 0; }，必须单独补上ol { padding-left: 2rem; }，否则序号没空间显示
现代项目推荐：用 display: flex 彻底绕开浮动陷阱
flex 布局天然形成 BFC，ol 和 li 都保持语义完整性，序号位置完全可控，响应式换行也清晰。
ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }-
li { margin-right: 1rem; }—— 用margin控制间距，不依赖序号缩进 - 若需保留原生序号，去掉
list-style: none，并确保ol有足够padding-left（如2rem） -
li内部图标用display: flex+gap排布，不再需要float，list-style-position: inside在 flex 容器中表现稳定
实在不能删浮动？只能手动模拟序号
仅限无法修改结构的遗留系统。此时原生 counter() 不可靠，必须放弃语义化序号，用伪元素硬写。
-
ol { list-style: none; }—— 先关掉原生序号，避免干扰 -
li::before { content: attr(data-index) ". "; }—— 用data-index属性控制数字，比 JS 注入更轻量 - 若必须动态生成，用 JS 补充：
document.querySelectorAll('ol li').forEach((el, i) => el.innerHTML = (i+1) + '. ' + el.innerHTML) - 注意：屏幕阅读器不会读取伪元素内容，可访问性受损；移动端换行逻辑也由容器宽度硬控，极易错位
真正容易被忽略的是：你调来调去的 list-style-position 和 padding-left，其实都是在给 BFC 缺失打补丁。一旦开始用 float 布局列表，问题就不是“怎么修”，而是“为什么非要用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
