浮动卡片布局仍值得用，因其轻量、兼容老浏览器且不依赖Flex/Grid，适合快速搭建自媒体侧边图文卡片，但需注意父容器塌陷、清浮动失效及小屏换行错乱等问题。
浮动卡片布局为什么现在还值得用
因为轻量、兼容老浏览器、不依赖 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。
立即学习“前端免费学习笔记（深入）”；
示例：
.card-grid {
overflow: hidden; /* 关键：触发 BFC，自动包含浮动 */
}
.card {
float: left;
width: calc(50% - 10px);
margin-right: 20px;
}- 不用
clear: both插空 div，维护成本高且语义差 -
overflow: auto也行，但可能意外触发滚动条 - 如果父容器本身有
height固定值，overflow: hidden会裁剪内容——此时改用display: flow-root
响应式浮动卡片怎么避免小屏错行
浮动卡片在宽度不足时不会“智能换行”，而是强行左对齐挤在一起，直到撑不下才掉到下一行——这会导致最后一行只剩一张卡，右边大片留白。
解决核心是控制每行张数 + 精确计算宽度与间隙：
- 用
calc()动态减去 margin：比如两列时写width: calc(50% - 12px)（假设左右 margin 各 12px） - 小屏断点统一用
max-width媒体查询，别混用min-width和max-width - 移除浮动前，先确保所有卡片
box-sizing: border-box，否则 padding 会让宽度超限
示例断点：
@media (max-width: 768px) {
.card {
float: none;
width: 100%;
margin-right: 0;
}
}浮动卡片和现代布局混用的风险点
别在同一个容器里混用 float 和 display: flex ——浮动元素会从 flex 容器中“逃逸”，不再受 justify-content 控制，且可能覆盖其他 flex 项。
性能影响很小，但可维护性差：当团队新人接手时，看到 float 还要查是否被 clear、是否塌陷、是否要加 hack，远不如纯 Flex/Grid 直观。
- 已有浮动代码想升级？优先把卡片外层改成
display: flex，内部卡片去掉float，用flex: 0 0 calc(...) - 如果必须保留浮动（比如 CMS 模板受限），就别给父容器加
display: grid——冲突不可预测 - Chrome DevTools 里看浮动元素，右上角不会显示“flex item”或“grid area”，这是判断是否真被现代布局接管的最快方式
浮动本身没过时，但它的“副作用”必须手动兜底。很多人漏掉的其实是：浮动卡片里的图片没设 max-width: 100%，结果在窄屏溢出容器——这个比浮动本身还容易破版。
