浮动列数切换必须重设width，不能只调margin或padding；父容器需伪元素清除浮动；小屏应取消浮动回归文档流；高DPR屏需用calc()、background-image或transform控制像素级间隙。
浮动列数切换必须重设 width，不能只调 margin 或 padding
浮动元素的排列完全依赖于显式宽度总和是否 ≤ 100%。如果只用 margin 模拟间距，或靠 padding 撑开间隙，实际占用宽度会超限，最后一项必然换行错位。尤其在 Safari 旧版中，width 缺失时 float 可能直接失效。
正确做法是：每档断点下都重新定义 width 值，并配合 box-sizing: border-box 把 padding/border 算进宽度里：
.gallery-item {
float: left;
box-sizing: border-box;
}
@media (max-width: 480px) {
.gallery-item { width: 100%; }
}
@media (min-width: 481px) and (max-width: 768px) {
.gallery-item { width: 50%; }
}
@media (min-width: 769px) {
.gallery-item { width: 25%; }
}- 断点值别硬抄 768px —— 打开浏览器调试器，拖动窗口看真实触发时机
- 所有
.gallery-item必须有width，哪怕只是100% - 避免用
em或rem设宽度，它们受字体缩放影响，会导致列宽抖动
父容器高度塌陷不是“bug”，而是浮动的固有行为
浮动元素脱离文档流，父容器默认无法感知其高度。不处理就会导致后续内容上浮、背景色消失、边框截断等现象。这不是兼容性问题，所有支持 float 的浏览器都这样。
最稳的清除方式是伪元素法，比 overflow: hidden 更可控（后者在需要滚动或阴影时会出问题）：
立即学习“前端免费学习笔记（深入）”；
.gallery::after {
content: "";
display: table;
clear: both;
}- 不要在 HTML 里加
<div style="clear:both"></div>—— 语义污染，维护成本高 -
overflow: hidden在父容器需横向滚动或带box-shadow时会裁剪内容 - 如果用了
transform或will-change，伪元素清除仍有效；overflow可能触发意外层叠上下文
小屏下取消浮动比“强行压缩列宽”更可靠
当视口窄到不足以容纳两列时，继续保留 float: left + width: 50%，反而容易因四舍五入误差、子元素内边距微差或字体渲染差异，导致某一项被挤到下一行——看起来像“三列变两列失败”。
直接在小屏断点里关掉浮动，回归文档流，是最干净的解法：
@media (max-width: 480px) {
.gallery-item {
float: none;
width: 100%;
}
}-
float: none后无需再写display: block，块级元素默认就是 - 如果图片高度不一致，取消浮动后自然垂直堆叠，不会出现底部参差不齐的问题
- 这个切换点要早于列宽临界值——比如 480px 就该切，别等到 400px 才动
不同设备 DPR 下，浮动列间隙可能视觉不均
高 DPR 屏幕（如 Retina、Windows HiDPI）会让 1px 的 border 或 margin 渲染为物理 2px，而相邻浮动项若没统一处理，会出现左右间隙粗细不一的现象。这不是代码写错了，是像素对齐问题。
解决思路不是加 JS 适配，而是用 CSS 原生方案：
- 用
gap替代间隙：浮动本身不支持gap，但可用padding+calc()模拟，例如width: calc(50% - 8px)配合padding: 8px - 避免
1px solid边框，改用background-image: linear-gradient()绘制 0.5px 线 - 真要保 1px 视觉效果，得用
transform: scaleY(0.5)配合origin控制缩放锚点
这些细节在桌面端不明显，但在 iPad Pro 或 Surface Laptop 上一眼就能看出差别。浮动布局的响应式，最难的从来不是列数切换，而是像素级的一致性控制。
