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 结构正确，就能保持连贯。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 更省心

事情说清了就结束。浮动 + CSS 计数器不是不能用，但每一步都得确认 DOM 顺序、格式化上下文归属、以及浏览器对浮动元素计数行为的实际处理 —— 这些细节比写几行 CSS 花的时间还多。