list-style-position: inside 会使序号被浮动元素遮挡或挤出可视区，因序号渲染在内容盒内而浮动元素脱离文档流；改用 outside 可快速解决，或通过 display: flow-root 创建 BFC 并配合 padding-left 保留序号空间。
为什么 list-style-position: inside 会让序号“消失”
不是真的消失，是序号被浮动元素遮挡或挤出可视区。当 li 内有 float: left 或 float: right 的子元素（比如图标、缩略图），且列表项本身没清除浮动时，list-style-position: inside 会把序号渲染在 li 的内容盒内——而浮动元素已脱离文档流，导致序号和文字重叠、错位，甚至被裁剪。
用 list-style-position: outside 最快止损
这是最直接的绕过方式：序号默认放在 li 左侧外边距区，不参与内部布局流，天然避开浮动干扰。
-
list-style-position: outside是浏览器默认值，无需额外声明 - 若之前强制写了
inside，删掉它即可恢复序号可见 - 注意：序号会与左侧文本有一定间距，可通过
padding-left或margin-left微调对齐
非要保留 inside？必须清除浮动并控制盒模型
如果设计强依赖序号和文字左对齐（比如带图标+编号的步骤列表），且图标必须浮动，就得手动稳住布局：
- 给
li加overflow: hidden或display: flow-root（推荐后者，语义更清晰）来创建 BFC，包裹浮动子元素 - 确保
li有足够宽度容纳序号+内容，避免width设为fit-content或被浮动压缩 - 必要时用
text-indent或padding-left手动预留序号空间，因为inside不自动撑开左边距
示例关键样式：
li {
list-style-position: inside;
display: flow-root; /* 清除内部浮动 */
padding-left: 1.5em; /* 为序号留位，避免文字顶到序号上 */
}
现代替代方案：别用浮动，改用 flex 或 grid
浮动本就不该用于布局控制，尤其在列表这种语义明确的结构里。用 display: flex 替代浮动图标，序号位置完全可控：
-
li设为display: flex，图标用margin-right或gap排开，文字自然跟随 -
list-style-position: inside在 flex 容器中表现稳定，序号不会被挤跑 - 兼容性足够好（Chrome 21+/Firefox 20+/Safari 6.1+），IE 不在考虑范围内时可放心用
真正容易被忽略的是：序号是否可见，本质不是 list-style-position 的问题，而是父容器是否建立了可靠的块格式化上下文。浮动只是诱因，BFC 缺失才是根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
