float 会让 li 的圆点/数字消失，因为 list-style 标记渲染在 li 的外边距区域，而浮动使 li 脱离文档流，导致该区域无法渲染；推荐改用 display: flex 或 inline-block 实现横排。
为什么 float 会让 li 的圆点/数字不见了
因为 list-style 的标记（bullets 或 numbers）是渲染在 li 的「外边距区域」的，而一旦给 li 加了 float，它就脱离了文档流，浏览器会忽略这个外边距区域的渲染逻辑——不是样式丢了，是压根没地方画了。
常见错误现象：ul li { float: left; } 之后，列表项排成一行，但前面既没圆点也没序号，开发者以为是 list-style 没生效，反复加 list-style: disc; 没用。
- 这不是 CSS 优先级问题，也不是浏览器兼容性问题，是浮动本身的渲染机制导致的
- 哪怕你显式写了
list-style-position: inside;，对浮动元素也无效 - 如果父
ul没清浮动，还可能造成高度塌陷，进一步掩盖问题
不用浮动也能让 li 横排：现代写法更可靠
横排列表的本质需求是「行内布局」，float 是为图文混排设计的，强行用于导航菜单或标签栏，副作用多、维护成本高。
推荐直接改用 display: flex 或 display: inline-block：
立即学习“前端免费学习笔记（深入）”；
-
ul { display: flex; }+li { margin-right: 1rem; }，简单干净，list-style完全保留 -
li { display: inline-block; vertical-align: top; }，兼容到 IE8，注意li间有空格会留缝隙，可用注释或负margin消除 - 避免用
float后再靠overflow: hidden清浮动来“修复”，这治标不治本，且影响可访问性和语义
示例（flex 方案）：
ul { display: flex; list-style: none; padding: 0; }
li { margin-right: 16px; }
真要保留 float？那就手动补标记
极少数遗留项目无法动布局结构，必须用 float，又得显示圆点——只能放弃原生 list-style，自己模拟。
- 把
list-style: none;写死，防止干扰 - 用
::before伪元素 +content插入符号：li::before { content: "• "; color: #666; margin-right: 8px; } - 若需有序列表，不能依赖
counter()自增（浮动后顺序可能错乱），建议改用数据属性或 JS 控制 - 注意伪元素默认是 inline，若
li高度不一致，可能需要vertical-align对齐
移动端和可访问性容易被忽略的点
用 float 横排 li 在响应式断点下极易错位，而且屏幕阅读器对浮动列表的朗读顺序可能异常——它按 DOM 顺序读，但视觉上已脱离流，用户听到的和看到的不一致。
- Flex 布局天然支持
flex-wrap，换行逻辑清晰；float换行则依赖容器宽度和li宽度硬算，稍一变化就崩 - 如果列表用于导航（如
nav里的ul），务必检查键盘 Tab 顺序是否仍符合 DOM 顺序，float不影响 tab index，但视觉错乱会误导用户 - 别为了“兼容老 IE”牺牲可访问性，IE11 已停止支持，真正需要兼容的场景应评估是否值得继续维护
浮动不是不能用，而是用在列表上，从一开始就没对准问题。标记消失只是第一个信号，后面还有清浮动、响应式、语义、维护性一连串麻烦等着。
