圆点“不见”是因list-style-position: inside将符号塞入浮动li的内容区导致裁剪或错位；真正有效的方案是让li保持文档流，如改用inline-block或flex布局。
为什么给 ul 设置 list-style-position: inside 会让圆点“不见”
这不是浏览器 bug，而是渲染逻辑使然：list-style-position: inside 把圆点（或数字）强行塞进 li 的内容区域里，而一旦 li 浮动了，它就脱离文档流，内容区域的尺寸和位置变得不可靠——圆点要么被裁掉，要么挤到文字左侧外边距之外，甚至重叠在文字上。开发者工具里看 computed 样式，list-style-position 值可能是 inside，但圆点就是不显示，根源在这里。
ul 上设 list-style-position: outside 不起作用？检查浮动是否还在
list-style-position: outside 是默认值，但它依赖 ul 或 li 的外边距区域正常存在。如果 li 还挂着 float: left，那这个外边距区域压根不会参与渲染——不是样式没生效，是浏览器直接跳过了这块绘制逻辑。
- 用开发者工具检查
li元素，确认float是否已被移除或覆盖 - 如果必须保留浮动（比如老项目不能动结构），
list-style-position就是无效的，得换方案 -
ul自身设list-style-position没用，关键在li是否脱离文档流
真正能保住圆点的写法：不靠 float，也不靠 list-style-position
现代布局下，与其折腾 list-style-position 和浮动的兼容性，不如绕开问题源头。圆点要显示，前提是 li 得老老实实待在文档流里，且 ul 有足够 padding-left 留出符号空间。
- 把
li { float: left; }换成li { display: inline-block; vertical-align: top; }，圆点立刻回来 - 或者直接用
ul { display: flex; flex-wrap: wrap; }，list-style完全不受影响 - 若用了全局
* { padding: 0; }，记得单独补上ul, ol { padding-left: 2rem; } - 避免在
li上写list-style-type: none——它不继承，写了也白写
极少数必须用浮动又得显示圆点？自己画
真遇到那种改不动 HTML、不能删 float、还必须显示原生圆点的遗留场景，list-style 已经指望不上了。只能放弃语义化标记，用伪元素模拟：
li {
float: left;
position: relative;
padding-left: 1.5em;
}
li::before {
content: "•";
position: absolute;
left: 0;
color: #333;
}
注意：此时 ol 的数字顺序无法靠 counter() 可靠维持，序号得用 data-index 或 JS 控制。这种方案是兜底，不是推荐路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
