序号“不见”的根本原因是bfc缺失及ul默认padding-left被重置。浮动子元素导致list-style-position:inside使序号与文字重叠或溢出；通配符清空padding-left则直接剥夺序号绘制空间；修复需设置ul/ol padding-left:2rem并确保bfc成立。
list-style-position: inside 为什么会让序号“不见”
不是样式失效，是序号被画在了错误位置。当 li 内有 float: left 或 float: right 的子元素（比如图标、缩略图），且 li 没清除浮动时，list-style-position: inside 会把序号渲染进 li 的内容盒内部——而浮动元素已脱离文档流，导致序号和文字重叠、错位，甚至被裁剪出可视区。
ul 的 padding-left 被清空才是真凶
通配符重置如 * { padding: 0; } 会干掉 ul 默认的 padding-left（通常约 40px）。项目符号（bullets / numbers）并不画在文字里，而是依赖这段左内边距提供的“画布空间”。没了它，符号就挤到容器边缘外，视觉上等于消失。
-
ul, ol { padding-left: 2rem; }是最直接的修复，推荐值2rem（≈32px）兼顾缩放与字体差异 - 子列表需单独声明：
ul ul, ol ol { padding-left: 1.5rem; }，不能靠继承 - 别用
margin-left替代 —— 它作用于整个ul块外部，对符号定位无效
浮动还在用？那就别让 li 自己 float
给 li 加 float 是最彻底破坏列表语义的做法：序号区域被浏览器忽略，list-style-position 失效，父 ul 高度塌陷，屏幕阅读器朗读顺序也可能错乱。
- 横排列表请改用
ul { display: flex; }+li { margin-right: 16px; }，list-style完全保留 - 若必须兼容老浏览器，用
li { display: inline-block; vertical-align: top; }，注意 HTML 空格会留缝 - 真要硬扛浮动，就放弃原生序号：
li { list-style: none; }，再用li::before { content: "• "; }手动模拟
真正该盯住的是 BFC 是否成立
序号是否可见，表面看是 list-style-position 或 padding-left 的问题，根因其实是父容器有没有建立可靠的块格式化上下文（BFC）。浮动只是诱因，BFC 缺失才是序号“失踪”的底层逻辑。
- 给
li加display: flow-root（比overflow: hidden语义更清晰）可包裹内部浮动子元素 - 若用了
list-style-position: inside，必须配合padding-left预留空间，否则文字会顶到序号上 - Flex 布局下，
ul > li不要设display: flex，否则嵌套ul的缩进会被挤压；应只控制直接子项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
