css计数器在浮动元素上易出现序号重复或跳号，因其严格按dom顺序触发而非视觉顺序；应避免在浮动li上直接使用counter-increment，改用父容器ul控制计数并配合::before显示。
浮动导致 counter-increment 重复或跳号
浮动元素脱离文档流后，CSS 计数器的执行顺序可能和视觉顺序不一致，尤其在多列浮动列表中，li 元素按 HTML 顺序计数，但渲染时被挤到上一列末尾，造成序号“回退”或“错位”。这不是浏览器 bug，而是计数器严格按 DOM 树遍历触发，和布局无关。
- 只对设置了
display: block（或默认块级）且未浮动的元素生效最稳定；浮动后，某些浏览器（如旧版 Safari）会跳过部分counter-increment - 避免在
float: left的li上直接用counter-increment—— 改用伪元素 +counter()渲染序号，但计数逻辑仍要绑定在非浮动容器上 - 若必须浮动，把计数器提升到父容器（如
ul），用counter-reset初始化，再让每个li::before读取，而非靠li自身触发递增
counter-reset 放在哪才真正重置
很多人把 counter-reset: mylist 写在 ul 上却没效果，是因为它只影响该元素的直接子元素是否从 1 开始计数 —— 但前提是子元素自己得执行 counter-increment。如果子元素是浮动的、或被 display: contents 干扰，重置就形同虚设。
-
counter-reset必须作用于包含所有需计数子项的最近共同祖先，且该祖先不能是display: contents或visibility: hidden - 浮动容器（如
ul）若未设置height或overflow，可能高度塌陷，导致部分li实际不在其块格式化上下文中，counter-reset对它们失效 - 安全做法：给
ul加overflow: hidden或display: flow-root（现代写法），确保浮动子项仍属于其计数作用域
用 ::before 显示序号时，counter() 和 attr() 别混用
有人试图用 data-index 属性配合 attr(data-index) 来显示序号，以为能绕过浮动干扰 —— 但这是静态值，HTML 里写几就是几，无法自动响应插入/删除。而 counter() 是实时计算的，只要 DOM 结构正确，就能保持连贯。
-
content: counter(mylist)必须搭配对应counter-increment: mylist的元素，否则返回 0 - 浮动
li上写counter-increment: mylist后，li::before { content: counter(mylist) }能显示，但序号可能乱（见第一点），此时应改用ul::before触发递增，再让li::before读取 - 不要在同一个
::before里混用counter()和attr()做拼接，比如content: "第" attr(data-num) "项"—— 这彻底放弃 CSS 计数器能力，回到手动维护
现代替代方案：display: grid + counter 更可靠
浮动布局本身已不适合做有序列表排版。Grid 可以用 grid-auto-flow: dense 和 grid-row 控制位置，同时完全保留文档流，counter-increment 按 HTML 顺序稳定执行。
立即学习“前端免费学习笔记（深入）”；
- 把
ul设为display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，li不用浮动，序号自然连续 - 仍可保留
counter-reset/counter-increment，因为 Grid 项仍在正常流中，浏览器能准确识别兄弟关系 - 兼容性注意：IE 不支持 Grid，若必须兼容，就别碰浮动列表序号，改用 JS 动态写
textContent更省心
