圆点消失的根源是bfc缺失而非list-style失效：float使li脱离文档流导致外边距区不渲染，通配符重置清空ul默认padding-left（预留画布空间），需恢复padding-left并避免list-style-position:inside，最佳解是ul设display:flow-root或flex创建bfc。
float 让 li 的圆点根本没地方画
不是 list-style 没生效，是浏览器压根不渲染那个区域。圆点/数字默认画在 li 的外边距区（margin area），而 float 会让 li 脱离文档流，浏览器直接跳过外边距区的绘制逻辑——符号还在 CSS 里，但“画布”被撤了。
ul 的 padding-left 被清空才是真凶
通配符重置如 * { padding: 0; } 会干掉 ul 默认的 padding-left: 40px（或约 2rem）。这段内边距就是专为圆点预留的“画布空间”。没了它，即使 list-style: disc 有效，符号也会溢出到容器左侧不可见区域。
-
ul, ol { padding-left: 2rem; }是最直接修复，值够大、适配缩放 - 子列表需单独声明：
ul ul, ol ol { padding-left: 1.5rem; }，继承不了 - 别用
margin-left替代——它作用于整个ul外部，对符号定位无效
list-style-position: inside 在浮动下完全失效
设成 inside 后，圆点被强行塞进 li 的内容盒内部，而浮动子元素已脱离流，导致圆点和文字重叠、错位甚至被裁切。更关键的是：浮动 li 的外边距区本就不参与渲染，inside 只会让问题更难排查。
- 删掉
list-style-position: inside，用默认的outside就能快速恢复可见性 - 若设计强依赖
inside（比如图标+文字左对齐），必须给li加display: flow-root创建 BFC，并配合padding-left: 1.5em手动留位 -
overflow: hidden虽能清浮动，但语义模糊，且可能影响可访问性
真正该盯住的是 BFC 是否成立
圆点是否出现，表面是 padding-left 或 list-style-position 的问题，底层其实是父容器有没有建立可靠的块格式化上下文（BFC）。浮动只是诱因，BFC 缺失才是“失踪”的根因。
- 给
ul加display: flex或display: flow-root，比硬扛float更干净 - 用
display: inline-block替代float时，注意 HTML 空格会生成间隙，需用注释或负margin消除 - 移动端响应式下，
float换行靠宽度硬算，稍一变化就崩；flex-wrap的换行逻辑才真正可控
圆点消失从来不是样式写错了，而是你让浏览器失去了渲染它的上下文——浮动撕开了文档流，全局重置抹掉了画布，而开发者还在调 list-style-type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
