直接删掉 list-style-position: inside 改用 outside 可解决90%序号“消失”问题，因 inside 使序号画入 li 内容盒内，与浮动元素重叠或被裁切；根本原因是 ul 缺失默认 padding-left（约40px）及 BFC 不足。
直接删掉 list-style-position: inside，换成默认的 outside，90% 的序号“消失”问题当场解决。
为什么 list-style-position: inside 会让序号“不见”
不是样式没生效，是序号被画进了 li 的内容盒内部，而浮动子元素（比如图标、缩略图）已脱离文档流，导致序号和文字重叠、错位，甚至被裁出可视区。更关键的是：浏览器根本不会在浮动 li 的外边距区域渲染序号——那块地方它直接跳过了。
ul 的 padding-left 被清空才是真凶
通配符重置（如 * { padding: 0; }）会干掉 ul 默认的 padding-left（通常约 40px）。项目符号不画在文字里，而是依赖这段左内边距提供的“画布空间”。没了它，序号就挤到容器边缘外，视觉上等于消失。
-
ul, ol { padding-left: 2rem; }是最直接的修复，推荐值2rem（≈32px），兼顾缩放与字体差异 - 子列表需单独声明：
ul ul, ol ol { padding-left: 1.5rem; }，不能靠继承 - 别用
margin-left替代——它作用于整个ul块外部，对序号定位无效
非要保留 inside？那就必须稳住 BFC
序号是否可见，表面看是 list-style-position 或 padding-left 的问题，根因其实是父容器有没有建立可靠的块格式化上下文（BFC）。浮动只是诱因，BFC 缺失才是序号“失踪”的底层逻辑。
立即学习“前端免费学习笔记（深入）”；
- 给
li加display: flow-root（比overflow: hidden语义更清晰），包裹内部浮动子元素 -
li必须有足够宽度容纳序号 + 内容，避免设width: fit-content或被浮动压缩 - 配合
padding-left: 1.5em手动预留序号空间，否则文字会顶到序号上
真正容易被忽略的是：你调来调去的 list-style-position 和 padding，其实都是在给 BFC 缺失打补丁。一旦开始用 float 布局列表，问题就不是“怎么修”，而是“为什么非要用”。
