clear: left在浮动卡片布局中失效是因为它仅清除左侧浮动流，不控制列数；若每张卡片都设该属性，会导致垂直堆叠；正确做法是仅对每行首项（如nth-child(3n+1)）设置clear: left，并配合宽度控制与bfc触发。
clear: left 为什么在浮动卡片布局里失效
clear: left 的作用是「让元素的上边界避开前面所有向左浮动的兄弟元素」，但它不负责“控制列数”——它只响应已存在的浮动流。如果你直接给每张卡片加 clear: left，结果是每张卡片都独占一行，根本不会形成三列。
常见错误现象是：卡片垂直堆叠、间距失控、最后一行留白异常。根本原因是把 clear 当成了栅格控制工具，而它只是浮动清除机制的一部分。
- 浮动卡片必须有明确宽度（比如
width: 30%或固定像素），且总和 + 间隙 ≤ 容器宽度 -
clear: left只应在「每行第一张卡片」上设置，而不是每张都设 - 容器需触发 BFC（如加
overflow: hidden）来包裹浮动，否则高度塌陷
正确做法：用 nth-child(3n+1) 配合 clear: left
这才是真正能稳定实现「每行三列」的组合。关键不是盲目加 clear，而是精准定位每行首项。
.card {
float: left;
width: 30%;
margin-right: 3%;
}
.card:nth-child(3n+1) {
clear: left;
}
.card:last-child {
margin-right: 0;
}
-
nth-child(3n+1)匹配第 1、4、7… 张卡片，恰好是每行第一个 -
margin-right: 3%给前两张留出间隙，:last-child重置最后一张避免多余空白 - 如果卡片数量不是 3 的倍数，第 4 张仍会正确换行，不会挤到上一行末尾
替代方案：为什么现在更推荐 display: flex
clear + float 是老式布局手段，对响应式、对齐、间距控制都很吃力。现代项目中，display: flex 更直接：
.card-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.card {
flex: 0 0 calc(33.333% - 12px);
}
-
flex-wrap: wrap自动折行，无需clear -
gap统一控制间距，比margin更可靠 -
calc()中减去gap值，确保三列严格贴合容器宽度 - 兼容性上，Flex 已覆盖所有现代浏览器及 IE11（需加
-ms-前缀）
容易被忽略的细节：浮动卡片的宽高一致性
即使 clear 设置正确，如果卡片内容高度不一致，依然会导致下一行错位。例如第一行第二张卡片特别高，第三张会被顶下来，第四张（本该换行）却卡在第二张右侧。
- 所有卡片必须有统一高度基准，比如
min-height或height - 或用
align-items: flex-start（Flex 布局下）避免默认拉伸 - 浮动方案中，可用
overflow: hidden触发 BFC，但不如 Flex 的align-items稳定
浮动 + clear: left 能跑通，但它的脆弱性藏在细节里：宽度计算误差、内容高度波动、父容器未闭合……这些都不是语法错误，而是布局逻辑的隐性依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
