浮动卡片内容塌陷是因为float使元素脱离文档流，父容器无法感知子元素高度，导致高度为0；正确解法是clearfix（::after+display:table+clear:both）并兼容ie6/7的*zoom:1。
浮动卡片布局为什么内容会塌陷
因为 float 会让元素脱离文档流，父容器无法感知子元素高度，导致后续内容“压上来”或容器高度为 0。这不是 bug，是浮动的原始设计行为——它本就用于文字环绕图片这类场景。
- 常见错误现象：
div.card都设置了float: left，但外层.card-container高度为 0，背景色/边框消失，下方元素直接顶到顶部 - 使用场景：多列等宽卡片（如商品列表、项目展示），且需兼容老浏览器（IE8+）
- 不要只给父容器加
overflow: hidden—— 它虽能触发 BFC 解决塌陷，但会意外裁剪position: absolute子元素或阴影（box-shadow）
clearfix 的正确写法和兼容性取舍
现代项目推荐用 ::after 伪元素 + clear: both，它不污染 HTML 结构，且比 clear: both 单独加空标签更干净。
- 必须写的三要素：
content: ""（否则伪元素不渲染）、display: table（比block更稳妥，避免 IE6/7 下 margin 双倍问题）、clear: both - IE6/7 需额外声明
*zoom: 1触发 hasLayout，否则 clearfix 失效 - 别用
display: flex或display: grid替代——它们确实能绕过浮动问题，但这就不是在解决「浮动卡片 + clearfix」这个具体问题了
.card-container::after {
content: "";
display: table;
clear: both;
}
.card-container { *zoom: 1; }
浮动卡片的宽度计算容易出错
百分比宽度 + padding/margin/border 会突破容器，导致最后一张卡片掉行。这是浮动布局最常踩的坑。
- 错误写法：
width: 33.33%+padding: 10px→ 实际占宽 > 33.33% - 正确做法：统一用
box-sizing: border-box，让 padding/border 包含在 width 内 - 如果卡片有固定间隙（比如 20px 间距），用
margin-right给前两张加，最后一张用margin-right: 0或用:nth-child(3n)重置 - 不要依赖
calc(33.33% - 20px)做减法——浏览器解析精度和四舍五入会导致最后一列偶尔掉行
移动端适配时浮动失效的典型原因
不是浮动本身失效，而是 viewport 设置或媒体查询没覆盖到视口变化点，导致断点后卡片仍按 PC 宽度浮动，挤出容器。
- 必须检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否漏写 - 浮动卡片在小屏下建议改用单列：
@media (max-width: 768px) { .card { float: none; width: 100%; } } - 别在媒体查询里只改
width却忘了重置float——残留的float: left会让卡片堆在左侧，右侧留白 - 如果用了
rem或vw设定卡片宽度，注意它们在缩放或横屏时可能产生小数像素，加剧浮动错位
实际项目里，最麻烦的往往不是写清楚 float 和 clearfix，而是不同设备下 margin 折叠、字体加载导致的重排、以及第三方样式（比如重置库）悄悄覆盖了 box-sizing。这些细节不报错，但会让卡片突然错行一两个像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
