父容器塌陷是因浮动元素脱离文档流导致高度计算为0；nth-child+clear仅适用于固定列数的等宽布局，且需对浮动元素设clear:both；现代方案优先用overflow:hidden、clearfix伪元素或直接改用flex/grid。
浮动元素高度不一，为什么父容器塌陷
因为浮动元素脱离文档流，父容器无法感知子项实际高度，height 计算为 0 —— 这不是 bug，是 CSS 浮动的原始设计行为。常见现象：父容器背景色/边框消失、后续内容上移覆盖浮动区。
用 nth-child(n) 配合 clear 的真实适用场景
这个方案只在「等宽多列、固定列数」且「每行项数明确」时才可靠，比如 3 列布局，你想让第 4、7、10… 个元素强制换行。但注意：nth-child(3n+1) 加 clear: left 并不能解决塌陷，它只是让某些项避开左侧浮动，父容器依然塌陷。
- 真正起作用的是给这些“换行起点”加
clear: both，且它们必须是浮动元素本身（不是伪元素或空 div） - 如果列数会响应式变化（比如移动端变 2 列），
nth-child(3n+1)会失效，此时 JS 或 Flex/Grid 更稳 -
clear只对浮动元素生效，给非浮动元素设clear没效果
更直接有效的替代方案
与其硬凑 nth-child + clear，不如用现代方法堵住源头：
- 父容器加
overflow: hidden或overflow: auto（兼容 IE8+，最轻量） - 父容器用
::after伪元素清除：.clearfix::after { content: ""; display: table; clear: both; }，然后给父容器加class="clearfix" - 直接弃用 float：改用
display: flex（父容器设flex-wrap: wrap）或display: grid（如grid-template-columns: repeat(3, 1fr)）
为什么很多人卡在 nth-child 清除上
因为误把「视觉换行」当成「布局重置」。浮动布局中，nth-child(3n+1) 只能选中元素，但能否清掉前面的浮动，取决于它自己是否也浮动、是否足够宽、是否被其他样式干扰（比如 vertical-align 或 margin 折叠）。
立即学习“前端免费学习笔记（深入）”；
- 如果第 4 个元素本身没设
float: left，clear: both它就无效 - 如果父容器有
font-size: 0或行高异常，table伪元素可能渲染出意外高度 - IE6/7 不支持
::after，但也不支持nth-child—— 所以别试图在老浏览器里混搭这两个
浮动布局的破碎本质是流式计算失效，靠选择器“打补丁”永远比不上从容器层面收口。该切 Flex 就切，别给 nth-child 赋予它没有的能力。
