给li加float导致ol序号全为“1”或不显示，是因浮动使li脱离文档流，ie7等老版本会静默重置计数器，现代浏览器则易致序号溢出或父容器塌陷；推荐改用display:inline-block（需vertical-align:top）或display:flex方案。
为什么给 li 加 float 会让 ol 序号全变成 “1” 或直接不显示
不是 list-style-type 没生效，而是浮动让 li 脱离文档流，浏览器跳过序号区域的渲染。IE7 及更老版本中，float（或 display: inline-block、height）会静默重置计数器状态；现代浏览器虽不报错，但序号常被挤出可视区、与文字重叠，或因父容器高度塌陷而“消失”。
停用 float 后最简替代方案：用 display: inline-block
不改 HTML，只改 CSS 就能立刻恢复序号，兼容 IE8+，且保持横排效果：
li { display: inline-block; vertical-align: top; }- 必须显式加
vertical-align: top，否则基线对齐会导致上下错位 -
ul上设font-size: 0可消除inline-block间隙；或在 HTML 中删掉li标签间的换行/空格 - 别给
li设width或height，IE7 下仍可能触发序号全为 “1” 的 bug
现代项目首选：用 display: flex 彻底绕开浮动陷阱
flex 天然形成 BFC，ol 高度不塌陷，原生序号位置稳定，响应式也更可控：
-
ol { display: flex; flex-wrap: wrap; padding-left: 2rem; }——保留原生序号，padding-left提供绘制空间 -
li { margin-right: 1rem; }——用margin控制间距，不再依赖浮动 +clear - 若需图标与文字并排，用
li > * { display: flex; gap: 0.5rem; }，无需任何float - 避免在
li上再设display: flex，否则嵌套ul的缩进会被挤压
实在不能删浮动？放弃原生序号，用伪元素硬写
仅限无法修改结构的遗留系统，此时 counter() 不可靠，必须手动模拟：
-
ol { list-style: none; }——先关掉原生序号 -
li::before { content: attr(data-index) ". "; }——用data-index="1"等属性控制数字，比 JS 注入更轻量 - 别用
content: counters()，浮动下计数器状态不可信 - 同时要确保
ul有padding-left: 2rem，否则伪元素可能贴边溢出
真正容易被忽略的是：序号异常从来不是 list-style-position 写得不对，而是你在用图文环绕机制（float）强行做布局——它本就不该负责列表项排列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
