不推荐在新项目中使用 float 布局做响应式网格，因其无响应能力，需手动计算宽高、间隙与对齐，易导致塌陷、错行、滚动等问题，且性能差、兼容性差；现代应优先选用 grid 或 flex。
float 布局做响应式网格现在还行不行
不行，但不是完全不能用——是“不推荐在新项目里用”，尤其当你要适配手机、平板、高清屏时。float 本身没响应能力，它只负责把元素往左/右推，剩下的断行、换行、间隙控制、对齐逻辑全得靠你手动算 width、margin、clear，一换屏幕尺寸就崩。
常见错误现象：float 元素在小屏上挤成一列但高度不一致，导致下一行从中间开始贴；或者加了 min-width 后直接横向滚动；更糟的是，父容器高度塌陷后，下面的模块叠上来。
- 使用场景：仅限老项目维护、内网低分辨率后台、或必须兼容 IE8 及以下（但 IE8 本身也不支持媒体查询）
- 性能影响：浮动触发重排（reflow）比 Flex/Grid 高得多，尤其是频繁增删网格项时
- 兼容性陷阱：
display: inline-block+float混用会放大空白字符渲染问题；zoom: 1强制 hasLayout 在现代浏览器已无效
media query + float 怎么勉强撑住三栏变一栏
真要硬上，核心就两条：用媒体查询切断浮动流，再用 width 和 clear 重置流向。别碰 calc() 或百分比嵌套，IE9 以下不认。
典型写法：
.grid-item { float: left; width: 33.333%; }
@media (max-width: 768px) {
.grid-item { width: 100%; float: none; clear: both; }
}
- 必须给每个
.grid-item加clear: both，否则小屏下可能继承上一个的浮动状态 -
width用整数百分比（如33%），避免 33.333% × 3 = 99.999% 留白导致最后一项掉行 - 如果网格有边框或 padding，务必用
box-sizing: border-box，否则宽度计算会超 - 不要依赖
:nth-child清除每行末尾——响应式断点一变，行列关系就乱
float 网格里图片/文字错位怎么快速定位
错位八成是高度塌陷或基线对齐惹的祸。浮动元素默认按 baseline 对齐，图片和文字高度不一致时，视觉上就像“飘”着。
检查顺序优先级：
- 父容器有没有触发 BFC？没加
overflow: hidden或display: flow-root就大概率塌陷 - 子元素有没有设
vertical-align: top？尤其混排img和span时必加 - 是否用了
line-height影响行框高度？浮动元素会参与行框计算，值过大直接撑开间隙 - 有没有无意中触发
white-space: nowrap？文本不换行会让容器宽度暴增，挤垮浮动流
临时调试技巧：给所有 .grid-item 加 outline: 1px solid red，一眼看出实际占位范围，比看 margin/padding 更准。
为什么改用 display: grid 后旧 float 代码突然失效
因为 display: grid 会让元素脱离常规文档流，且自动忽略 float 声明——CSS 规范明确写了：浮动在 grid 容器的直接子元素上无效。
容易被忽略的点：
- 即使只给某一层加了
display: grid，它的所有直系子元素的float都会被无视，包括你没动过的老模块 - 如果用
@supports (display: grid)做渐进增强，记得把float样式放在不支持 grid 的 fallback 区块里，别混写 - 某些构建工具（如旧版 Autoprefixer）会把
display: grid错误降级成display: -ms-grid，而 IE 的实现和标准差很远，表现不可控
真正麻烦的不是语法切换，而是那些藏在 JS 里读取 offsetLeft、getBoundingClientRect() 的逻辑——它们在 grid 下返回的位置和 float 时代完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
