子元素换行因父容器未清除浮动且百分比总和超100%（含小数误差），float不触发BFC致高度塌陷；应使用box-sizing: border-box、calc(100%/3)、伪元素清除浮动，并确保viewport设置正确。
float 遇上百分比宽度：为什么子元素总换行？
因为父容器没清除浮动，且子元素的百分比加起来超过 100%（哪怕只多 0.1%），浏览器就会强制折行。CSS 中 float 不触发 BFC，父容器高度塌陷，导致后续内容错位。
- 用
box-sizing: border-box包住所有浮动子项，避免padding或border溢出宽度计算 - 子项宽度建议用精确值：比如三列栅格，别写
width: 33.33%，改用width: 33.333333%或更稳妥的width: calc(100% / 3)（注意兼容性） - 父容器必须清除浮动——最简方案是加
overflow: hidden，但会裁剪position: absolute子元素；更可控的是用伪元素：.grid::after { content: ""; display: table; clear: both; }
IE8–IE9 下 float 百分比错位的典型表现
IE8/9 对小数点后位数敏感，33.33% 在某些缩放或字体设置下会被截断为 33%，三列就只剩 99%，留出 1% 空隙，可能被渲染成换行或右侧空白。
- 绕过小数：用整数比例 +
margin补齐，例如三列可设width: 33%+margin-right: 1%（最后一列margin-right: 0） - 避免
font-size: 0去除间隙——它会让inline-block有效，但对float无效，还可能影响后代文本 - 测试时打开 IE 开发者工具，手动修改
width值看临界点，常会发现 33.333% 可行，33.33% 就不行
float 栅格和现代 display: grid 的关键取舍点
不是不能用 float 做响应式栅格，而是它在“动态列数切换”（比如从三列变两列）时需要媒体查询重写整套 width 和 clear，而 grid 只需改 grid-template-columns。
-
float栅格适合静态布局、需兼容 IE8–9 的老项目，优点是逻辑直白、调试可见（每个元素都真实浮动） -
grid在 Safari 10.1+、Chrome 57+、Firefox 52+ 支持良好，但 IE 完全不支持display: grid（连-ms-前缀版都仅限旧语法） - 混用风险：给
float元素加display: grid会直接覆盖浮动，不会叠加——二者底层布局模型互斥
移动端适配中 float 百分比失效的隐蔽原因
不是代码写错了，很可能是 viewport 设置漏了 initial-scale=1，导致 iOS Safari 自动缩放页面，把 33.33% 解析成物理像素时产生亚像素四舍五入误差，放大后错位更明显。
立即学习“前端免费学习笔记（深入）”；
- 检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在且未被 JS 覆盖 - 避免在浮动子项上用
transform: scale()，它会改变元素几何尺寸但不改变文档流占位，导致父容器计算错乱 - 真机调试时，用 Safari Web Inspector 查看 computed
width，对比声明值与实际渲染值，差值 > 0.5px 就可能引发换行
