浮动导致ol序号全为“1”或消失，根源是li脱离文档流使计数器重置或渲染区域丢失；应改用inline-block、flex或grid布局恢复原生序号。
浮动布局本身没有“排序”概念，所谓排序错乱，其实是浮动元素在文档流中按顺序贴边排列时，因宽度计算偏差、高度不一致或清除逻辑缺失，导致视觉上出现换行跳位、序号重置、内容覆盖等现象。直接修“排序”是方向错误，得从浮动的底层行为入手。
为什么float会让ol列表序号全变成“1”或消失
这是最典型的“排序错乱”表象，根源不是CSS写错了，而是float让li脱离文档流，浏览器计数器状态被重置或渲染区域丢失：
-
li设了float: left后，不再参与ol的计数上下文，IE系浏览器会静默丢弃计数器，现代浏览器虽保留但常把序号挤出可视区 -
list-style-position: inside对浮动li基本无效——序号本该画在内容盒左侧，而浮动元素的内容盒尺寸不可靠 - 开发者工具里看到
list-style-type: decimal生效，但computed样式中list-style-position可能已退化为outside或被忽略
用display: inline-block替代float快速恢复序号
不改HTML结构，只换布局方式，就能让原生序号立刻回归，兼容IE8+：
- 删掉所有
li { float: left; }，改用li { display: inline-block; vertical-align: top; } -
ul上加font-size: 0消除inline-block默认间隙，li内再显式设font-size恢复文本大小 - 必须补
ol { padding-left: 2rem; }——全局* { margin: 0; padding: 0; }会吃掉序号空间
现代项目直接切到flex或grid布局
这不是升级，而是绕过浮动设计缺陷的必然选择。序号、换行、响应式全部天然可控：
-
ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }+li { margin-right: 1rem; }，用margin控间距，序号用伪元素或保留原生 - 要保留原生序号，去掉
list-style: none，确保ol有足够padding-left（如2rem），且li不用float或height干扰计数 - 二维栅格场景直接用
display: grid：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，换行逻辑由浏览器自动处理，不依赖“贴边”
实在不能动结构？只能手动模拟序号
仅限无法修改DOM的遗留系统，此时原生计数器已不可信：
- 先关掉：
ol { list-style: none; } - 用伪元素硬写：
li::before { content: attr(data-index) ". "; }，data-index需JS或后端注入 - 放弃语义化序号，意味着无障碍阅读、打印样式、SEO都受影响——这只是临时止血，不是解法
真正容易被忽略的是：浮动错位从来不是样式写得不够细，而是你在用图文环绕机制强行做布局。工具用错了，补丁越打越多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
