:nth-child(3n+1) 本身不触发换行，仅选中元素；三列换行效果依赖浮动中 clear:left、Grid/Flex 的结构约束或样式调整，非布局控制属性。
为什么 :nth-child(3n+1) 不能直接“触发换行”
它本身不控制布局，只选中元素。你看到的“三列换行”效果，其实是靠后续样式（比如 clear: left 或浮动、Flex/Grid 的结构约束）配合选中逻辑实现的。单纯写 div:nth-child(3n+1) { clear: left; } 在浮动布局里才有效；在现代 Grid 或 Flex 中，它通常只是用来设置样式（如边距、背景），而非控制流。
浮动布局下用 :nth-child(3n+1) 清除左浮动
这是最经典也最容易出错的用法：让每第 1、4、7… 个子项强制换行，前提是所有子项都 float: left 且宽度固定。
- 必须给容器设
overflow: hidden或clearfix，否则高度塌陷 - 每个子项需明确设宽，例如
width: 30%（留点间隙）或width: calc(33.333% - 20px) -
div:nth-child(3n+1) { clear: left; }才能生效——注意是left，不是both，否则会破坏连续三列 - 如果 HTML 里有其他兄弟元素（比如标题、注释节点），
:nth-child计数会包含它们，导致错位；此时应改用:nth-of-type或确保结构纯净
Grid 布局中 :nth-child(3n+1) 的真实作用
在 display: grid; grid-template-columns: repeat(3, 1fr); 下，元素自动按顺序填满三列，根本不需要 :nth-child 来“换行”。这时它常用于差异化样式：
- 给每行第一个项加左边框：
item:nth-child(3n+1) { border-left: 2px solid #333; } - 给每行最后一项加右边框：
item:nth-child(3n) { border-right: 2px solid #333; } - 若想跳过首行（比如第一行是 banner），可用
item:nth-child(n+4):nth-child(3n+1)从第 4 个开始匹配 - 注意：Grid 项的 DOM 顺序和视觉顺序一致，但
:nth-child仍按 HTML 顺序计数，不受grid-row重排影响
Flex 布局中误用 :nth-child(3n+1) 的常见陷阱
Flex 默认单行（flex-wrap: nowrap），即使写了 :nth-child(3n+1) { flex-basis: 100%; } 也不能可靠换行——浏览器可能忽略或渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是设
flex-wrap: wrap，再用flex-basis控制单个宽度（如flex: 0 0 calc(33.333% - 20px)） -
:nth-child(3n+1)可用于添加 margin：item:nth-child(3n+1) { margin-left: 0; }消除首项左侧空隙 - 不要依赖
clear，Flex 不支持清除浮动语义 - IE11 对
3n+1支持完好，但对calc()内的百分比计算有 bug，建议用固定像素或预设 class 替代
真正要控制网格行为，优先用 Grid 的 grid-column 或 Flex 的 flex-wrap + 宽度策略；:nth-child(3n+1) 是修样式用的，不是布局面向的开关。
