nth-child不能直接清除浮动，因其仅选中元素而不改变display类型或浮动上下文；需配合display: block和clear: both，或用伪元素在目标元素上插入清除符。
nth-child 不能直接清除浮动
很多人试过写 div:nth-child(3) { clear: both; }，发现没用——不是语法错，是逻辑错。clear 作用对象必须是**自身参与文档流的块级元素**，而 nth-child 只是选中元素，不改变其 display 类型或浮动上下文。
常见错误现象：clear 生效但布局错乱、第3个元素被强行下移却没撑开父容器、IE 下完全失效。
- 真正起作用的是：让目标元素本身变成块级且清除前序浮动，比如加
display: block和clear: both - 更稳妥的做法是：不在浮动元素上硬加
clear，而是用伪元素在父容器末尾「补清」 - 如果必须针对第n个浮动项之后清浮，优先考虑给它的下一个兄弟元素设
clear，而不是它自己
用 :after 伪类 + nth-child 控制清除位置
想只在第3个浮动元素后插入清除符？靠父容器的 :after 不行——它只能插在末尾。得把伪元素挂到具体某个子元素上。
使用场景：响应式网格中，每行固定3列，需在第3、6、9…个元素后清除浮动，避免下一行错位。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
div.float-item:nth-child(3n) { position: relative; }，再配div.float-item:nth-child(3n)::after { content: ""; display: table; clear: both; } - 注意：
::after默认是 inline，必须显式设display: table或block才能触发清除行为 - 兼容性坑：
display: table在 IE8+ 可用，但 IE7 及更早需用zoom: 1触发 hasLayout
float + nth-child 的性能和维护风险
浮动布局本身已属过时方案，硬凑 nth-child 去修特定位置，等于在技术债上叠技术债。
参数差异明显：CSS Grid 中 grid-column: 1 / -1 一行清空比写一堆 nth-child(3n) 清除干净得多；Flexbox 里根本不用清浮。
- 每次改列数（比如从3列变4列），所有
nth-child(3n)都得重算、重测、重调 - 伪元素插入的清除符会增加渲染树节点，尤其在长列表中，可能引发重排抖动
- 若浮动元素高度不一致，仅靠
clear无法解决塌陷，仍要配合 BFC 触发（如overflow: hidden）
替代方案比“修复”更值得花时间
现在还用 float 布局，大概率是因为要兼容老项目或接手遗留代码。这时候纠结 nth-child 怎么清浮，不如先确认三件事：
- 是否所有目标浏览器都支持
display: grid？支持就直接用grid-template-columns: repeat(3, 1fr) - 能否把浮动容器升级为
display: flex并设flex-wrap: wrap？然后用flex-basis控制单列宽度 - 如果必须保留 float，至少把清除逻辑抽成 class，比如
.clear-3n，别散落在各种nth-child选择器里
复杂点在于：清除浮动不是独立动作，它依赖于浮动源的高度、父容器的 BFC 状态、后续元素的 display 类型——单独调一个 nth-child 很难稳住全局。
