用 float 实现响应式浮动布局可行，但必须同步设置 box-sizing: border-box、清除父容器塌陷、统一单位并采用 min-width 移动优先断点；否则易因 padding/border 超宽或高度塌陷导致错位溢出。
直接说结论：用 float: left 配合百分比宽度 + box-sizing: border-box + 媒体查询是可行的，但必须处理好浮动塌陷和尺寸溢出这两个最常踩的坑。
为什么图片浮动后错位或挤成一列？
根本原因是浏览器对百分比宽度的计算受 padding、border 和 margin 影响。比如设 width: 33.33%，再加 padding: 10px，实际宽度就超了，三张图放不下，第三张就会掉到下一行。
- 务必给所有浮动项加
box-sizing: border-box，让 padding 和 border 包含在 width 内 - 横向间距建议用
margin-right，最后一项用:nth-child(3n)清除右 margin，避免累积误差 - 不要混用
px和%做宽度控制，同一组浮动项只用一种单位
如何让不同屏幕下自动切换列数？
别用 max-width 单断点硬切，容易在 767px–768px 之间出现半列空白。推荐“移动优先 + min-width”写法，从窄到宽逐步增强：
- 默认（手机）：
width: 100%，单列垂直堆叠 -
@media (min-width: 768px)：width: 50%，平板两列 -
@media (min-width: 1024px)：width: 33.33%，桌面三列
注意：断点值要和设计稿真实设备宽度对齐，别照搬网上常见的 768/992，有些 iPad mini 宽度是 744px，得微调。
父容器高度塌陷导致后续内容上移怎么办？
overflow: hidden 虽快，但会意外裁剪 position: absolute 子元素或阴影；clear: both 的空 div 又污染结构。最稳妥的是伪元素清除：
.image-list::after {
content: "";
display: table;
clear: both;
}
这个写法兼容 IE8+，且不干扰布局流。如果项目已支持 Flex，就别硬扛 float —— 改用 display: flex; flex-wrap: wrap;，flex: 0 0 calc(33.33% - 20px) 配合 gap 更干净。
真正麻烦的不是写几行 CSS，而是当图片原始尺寸差异大（比如 4:3 和 16:9 混排）时，仅靠 width 和 height: auto 会导致高度不齐——这时候必须加 object-fit: cover 和统一容器高度，否则视觉上永远“对不齐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
