CSS实现卡片式布局_浮动元素与clearfix的应用

浮动卡片内容塌陷是因为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: bothIE6/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 宽度浮动，挤出容器。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。