使用float实现卡片并排布局，通过设置.card元素float: left和width配合margin，使三张卡占满一行（30%×3+1.5%×6=99%），父容器用::after伪元素清除浮动避免塌陷，结合媒体查询在小屏幕调整为两列或单列显示，适配响应式需求。
要实现卡片并排布局，使用CSS的float属性配合width是一种经典方法。虽然现代开发更多采用Flexbox或Grid布局，但在一些兼容性要求较高或旧项目维护中，浮动仍是实用选择。
基本原理：float + width 控制排列
通过给多个卡片元素设置float: left，让它们尽可能向左靠拢，再配合固定或百分比宽度，就能实现并排显示。关键点在于父容器要清除浮动，避免布局塌陷。
示例结构：
卡片1卡片2卡片3
CSS样式设置
每个卡片设置宽度和左浮动，父容器用伪类清除浮动影响：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 30%;
float: left;
margin: 1.5%;
background: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
.card-container::after {
content: "";
display: table;
clear: both;
}
说明：
- 宽度设为30%，外边距1.5%，三张卡加起来刚好占满一行（30%×3 + 1.5%×6 = 99%）
-
box-sizing: border-box确保内边距包含在宽度内 -
::after伪元素触发BFC，清除子元素浮动对父容器高度的影响
响应式处理建议
在小屏幕上并排可能拥挤，可用媒体查询调整：
@media (max-width: 768px) {
.card {
width: 46%;
}
}
@media (max-width: 480px) {
.card {
width: 100%;
margin-bottom: 10px;
}
}
这样在手机端自动变为单列，提升可读性。
基本上就这些。float布局虽老，但理解它有助于掌握CSS定位逻辑，也能应对一些特殊场景需求。
