父容器高度为0是float的设计逻辑所致，因其使子元素脱离文档流，父容器无法感知其存在；clear: both对父容器无效，需用::after伪元素（content+display+clear三者齐全）或display: flow-root解决。
为什么给卡片加 float 后父容器高度变成 0
不是代码写错了，是 float 本身的设计逻辑：它让元素脱离文档流，父容器在计算高度时直接“看不见”这些卡片。哪怕你写了 background-color 或 border，也会消失；后续元素会往上叠，页脚卡进卡片堆里——这都不是 bug，是 float 的原始行为。
clear: both 加在父容器上完全没用
很多人试过给父容器写 .card-container { clear: both; }，结果毫无反应。因为 clear 只作用于“自己”，不是用来清理子元素的。它只会让这个父容器避开前面的浮动兄弟元素，对内部浮动卡片毫无影响。
- 真正起效的
clear必须出现在浮动卡片之后、且仍在同一父容器内的块级元素上（比如手动加一个<div style="clear:both"></div>），但这污染 HTML，不推荐 - 伪元素
::after能模拟这个“之后的块级元素”，但前提是它必须渲染出来：content: ""缺失 → 伪元素不生成 → 清除失效 -
display必须设为table或block；如果漏掉或写成inline，clear: both对它无效
现代项目优先用 display: flow-root
一行 CSS 就能解决，无副作用，兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+（2026 年已全覆盖）：
.card-container {
display: flow-root;
}
- 它专为触发 BFC 而生，语义清晰，不裁剪
box-shadow、下拉菜单、transform溢出内容 - 不改变卡片原有布局逻辑（不像
flex或grid会重置子项float行为） - 如果父容器已经是
display: flex或display: grid，float会自动失效，此时加flow-root或clearfix都无效——说明你根本不需要清除浮动
什么情况下还得手写 clearfix
仅两种真实场景需要：
- 项目必须支持 IE11 或更老浏览器（
flow-root不支持） - 对接 CMS 或第三方系统，HTML 结构无法修改，只能靠 CSS 修复
标准写法必须三件套齐备：
.clearfix::after {
content: "";
display: table;
clear: both;
}
缺一不可。别忘了嵌套结构：如果卡片容器里还套了一层浮动列表，那每一级直接包裹浮动子项的父容器都得单独加 .clearfix——外层加了，内层不会继承。
真正容易被忽略的，是那个还在用 float 排卡片的人：现代卡片布局早该用 flex 或 grid 了，float 只适合文字环绕图片这种原始场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
