浮动后百分比宽度计算不准确，根源在于盒模型未统一、html空格干扰及包含块参照错误；必须对浮动子元素显式设box-sizing:border-box、用calc()扣除固定开销、父容器设font-size:0并触发bfc。
浮动后百分比宽度计算不准确，不是浏览器算错了，而是你没管住它的盒模型、HTML空格和包含块参照关系——三者叠加，0.5px误差就能让最后一列掉行。
box-sizing: border-box 必须设在浮动子元素上
父容器设了 box-sizing: border-box 没用，它不控制子元素怎么占位。浮动元素参与排列的是自身宽高，而默认 box-sizing: content-box 会让 width: 25% + padding: 8px + border: 1px 实际占宽远超 25%。
- 必须对每个浮动子项显式写
box-sizing: border-box，或全局加* { box-sizing: border-box; }（注意要放在所有样式最前面） - 检查 DevTools 的 Styles 面板里
box-sizing是否被划掉——被覆盖的那条就是真凶 - 别漏伪元素：
*::before, *::after也要包含，否则清除浮动的::after仍按content-box算，可能撑破容器
浮动元素的 width 参照的是包含块，不是父容器
width: 100% 在浮动元素上不会参照父容器宽度，而是参照「包含块」——通常是视口或最近的定位上下文。一旦父容器高度塌陷（因浮动脱离文档流），它的 width: 100% 就可能按 0px 计算，浏览器 fallback 行为不可靠，尤其在 display: flex 或 display: grid 父容器中直接失效。
- 验证方式：选中浮动元素，在 Computed 面板看
width解析出的实际像素值，是否符合预期 - 若父容器是
width: auto（靠内容撑开），width: 100%就无从参考，得补上width: 100%或inline-size: 100% -
<img>这类内联元素加float后，建议同步设display: block，否则width: 100%常常不生效
HTML空格和亚像素四舍五入会放大误差
换行符生成的文本节点会占 0.5–1px，加上浏览器对 33.33% × 3 的亚像素计算（如 99.99px → 四舍五入为 100px 或 99px），极容易触发换行或间隙。Firefox 和 Safari 对这类误差尤其敏感。
- 父容器设
font-size: 0干掉空格，子项再重设font-size（漏一个文字就没了） - 避免纯百分比临界值，改用
calc()显式扣除固定开销：width: calc(33.3333% - 2px)（2px = 左右 margin 或 border 总和） - 禁用嵌套
calc()：calc(calc(100% / 3) - 2px)大部分浏览器不支持，直接丢弃 - IE9 要求
calc()内不能省略空格：calc(100% - 2px)合法，calc(100%-2px)无效
真正难调的不是 float，是它和响应式断点的隐式耦合
缩放时错位、小屏下掉行、媒体查询里加 clear: both 却没用……这些问题根源不是 float 本身，而是它和 box-sizing、HTML 空格、父容器 BFC 触发方式之间的连锁反应。每改一处，都得去 Computed 面板确认实际生效值，而不是只看 Styles 里写了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
