float 不该再用于多列响应式布局，因其专为图文环绕设计，强行用于栅格会导致清除浮动、高度塌陷、顺序依赖等问题；推荐用 Flexbox 替代，代码更简、行为更可控。
浮动多列布局在现代 CSS 中已不推荐使用
直接说结论：float 不该再用于多列响应式布局。它本质是为文字环绕图片设计的，强行用它做栅格会带来清除浮动、高度塌陷、顺序依赖等一堆隐性问题，尤其在响应式场景下更难维护。
如果你正在调试一段老项目里用 float 实现的三栏布局，并想加媒体查询适配移动端——先别急着写 @media，得先确认是否真有必要保留浮动结构。
用 Flexbox 替代 float 是最平滑的升级路径
绝大多数“浮动多列”需求，换成 display: flex 后，媒体查询只需控制 flex-direction 和 flex-basis，代码更短、行为更可预测。
-
float: left→ 改为flex: 1或flex: 0 0 33.333% - 清除浮动（
clear: both）完全不需要 - 移动端堆叠：在小屏下设
flex-direction: column，子项自动垂直排列 - 注意
flex-wrap: wrap可选，但多列流式布局通常用不到，除非列数动态变化
示例片段：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: flex;
}
.grid > * {
flex: 0 0 33.333%;
}
@media (max-width: 768px) {
.grid {
flex-direction: column;
}
.grid > * {
flex: 0 0 auto;
}
}媒体查询中控制列宽的关键不是像素值，而是相对单位与断点逻辑
用 float 时常见错误是写死 width: 300px，结果在不同设备上列宽无法伸缩。响应式列宽必须基于内容容器而非视口。
- 优先用百分比（
%）、flex-basis、或minmax()（配合 Grid） - 断点应依据内容“撑不开”或“挤太紧”的临界点，而不是设备型号（比如
max-width: 480px很可能不如max-width: 520px合理） - 避免嵌套过多媒体查询；一个组件最多 2–3 个断点足够覆盖手机/平板/桌面
- 如果必须兼容 IE10+ 且不能用 Flexbox，可用
display: table-cell+ 媒体查询隐藏/显示列，比float更稳定
真正需要坚持用 float 的极少数场景及补救方式
仅剩的合理用途是图文混排（如新闻正文内图片左/右浮动，文字环绕），此时响应式处理重点不在“列宽”，而在“浮动是否还合理”：
- 小屏下取消浮动：
@media (max-width: 480px) { img { float: none; margin: 0 auto; display: block; } } - 避免对浮动元素设
margin-top类样式，易导致错位；改用margin-bottom控制后续段落间距 - 不要给浮动父容器设
height，用overflow: hidden或伪元素清除即可
复杂点在于：一旦浮动和 Flex/Grid 混用，渲染顺序、层叠上下文、甚至 transform 动画都可能出人意料。这种混合布局，往往不是响应式没调好，而是底层结构该重构了。
