如何通过CSS浮动技术优化图文卡片布局，增强自媒体页面视觉效果？

本文共计962个文字，预计阅读时间需要4分钟。

由于轻量级、兼容老浏览器、不依赖Flex/Grid的复杂语义，适合快速搭建。

常见错误现象：父容器高度为 0，后面的内容直接叠上来；clear: both 加错位置，清浮动失效；多列卡片在小屏下挤成一列却换行错乱。

• 只在需要「文字环绕」或「多列等高卡片需兼容 IE9+」时选浮动，别为了“复古”硬上
• 避免对 float 元素设 vertical-align，它无效
• 浮动元素的 margin 在某些 IE 下会双倍，加 display: inline 可修复

如何让浮动卡片自动撑开父容器

靠 overflow: hidden 或 display: flow-root 最稳，比伪元素清浮动更少意外。前者兼容性好（IE8+），后者语义清晰但不支持 IE。

使用场景：卡片列表包裹在 .card-grid 容器里，内部每个卡片是 .card 并设了 float: left。