浮动卡片高度不一致会导致换行错乱，因浮动元素贴靠前一个元素边缘而非按行对齐；可靠解法是每行首个卡片加 clear: left，如 .card:nth-child(4n+1) { clear: left; }。
浮动卡片高度不一致导致换行错乱
用 float: left 布局卡片时，如果卡片高度不同，后续行的左端会卡在上一行较高卡片的底部，形成“阶梯状”断层，而不是整齐的网格。这不是 bug，是浮动的天然行为——浮动元素会尽可能贴住前一个浮动元素的边缘，而不是按行对齐。
常见错误现象：clear: both 加在每行末尾看似能“重置”，但响应式场景下卡片数动态变化，根本没法预判哪几个该加 clear；强行给中间卡片加 clear: left 又会导致整行塌陷。
- 真正可靠的做法是：**每行第一个卡片强制清除左侧浮动**，即给第 1、第 n+1、第 2n+1… 个卡片加
clear: left（n 为每行卡片数） - 用 CSS 选择器实现：
.card:nth-child(4n+1) { clear: left; }（假设每行 4 张） - 别依赖 JavaScript 动态计算位置再加 class——DOM 变动、字体加载延迟都会让计算结果错位
IE8–IE10 下 float 卡片撑不开父容器
父容器没有设定高度、又没触发 BFC 时，浮动子元素会脱离文档流，父容器高度坍缩为 0。现代浏览器里加 overflow: hidden 或伪元素 ::after 清除浮动基本够用，但在 IE8–IE10 里有兼容陷阱。
典型错误：只写 .container::after { content: ""; display: table; clear: both; } —— IE8 不支持 ::after 双冒号语法，必须用单冒号 :after；IE9+ 支持双冒号，但混用时容易漏掉兼容写法。
立即学习“前端免费学习笔记（深入）”；
- 安全写法要同时声明：
.container:after, .container::after { content: ""; display: table; clear: both; } -
display: table在 IE8 下比display: block更稳定，避免某些字体渲染后高度抖动 - 如果父容器本身有
zoom: 1（IE hasLayout 触发），也能清浮动，但这是 IE 专属 hack，不推荐作为主方案
浮动卡片在 Flex/Grid 主流布局中是否还值得用
纯浮动布局现在只适合极简场景：比如老项目无法改结构、或需要支持 IE7 的遗留系统。其他情况，它带来的维护成本远高于收益——比如响应式断点要重复写多套 nth-child 清除逻辑，动画时浮动元素 position 脱离导致 transform 失效，打印样式也容易错乱。
替代建议很直接：用 display: flex 配合 flex-wrap: wrap，或 display: grid 配合 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))。它们原生支持等高对齐、自动换行、间隙控制（gap），且无需手动清除浮动。
- Flex 方案注意：默认
align-items: stretch会让所有卡片等高，若不想等高，改用align-items: flex-start - Grid 方案注意：IE10–IE11 只支持旧版 Grid 语法（
display: -ms-grid），需额外加前缀，实际项目中往往不如 Flex 省事 - 如果必须保留浮动结构（如 CMS 输出不可控 HTML），就只用浮动做基础流向，所有对齐、间距、响应式都交给后代元素的 margin/padding 控制
