应改用flex或grid布局替代float，因其天然规避像素舍入问题；若必须用float，需设box-sizing: border-box并用整数百分比+margin微调。
float布局里百分比宽度加起来不到100%怎么办
这不是CSS bug，是浏览器对小数像素的舍入策略导致的——float元素宽度用百分比时，浏览器会把计算出的像素值向下取整（floor），尤其在缩放或高DPI屏上更明显。比如三个33.33%元素，实际渲染可能是33px + 33px + 33px = 99px，剩1px空隙。
- 别硬凑
33.333333%，再多位小数也没用，浏览器仍按当前容器宽度重新计算并向下取整 - 用
box-sizing: border-box统一包含边框和内边距，避免额外像素误差 - 优先考虑用
display: flex替代float，flex不依赖像素舍入，能自然均分 - 如果必须用
float，改用整数百分比+margin微调，例如33%+34%+33%，再用margin-right: -1px拉齐最后一项
为什么不能直接用Math.floor()在CSS里做向下取整
CSS本身没有运行时计算函数（calc()支持四则运算但不支持floor），Math.floor()是JavaScript方法，无法在纯CSS中调用。所谓“用floor处理CSS宽度”，本质是前端在JS中预先计算好整数像素值，再写进style.width或CSS变量里。
-
calc(100% / 3)仍是动态表达式，浏览器每次重排都会重新计算并向下取整，不是你JS里调一次Math.floor()就能锁定的 - 若用JS算：
Math.floor(container.offsetWidth * 0.3333)，要注意offsetWidth是四舍五入后的整数，本身已有精度损失 - 响应式场景下，窗口缩放会触发多次重排，JS手动设宽容易和媒体查询冲突，建议只在初始化且宽度固定时用
float + 百分比 + border/padding 导致错位的真实原因
默认box-sizing: content-box下，width: 33.33%只管内容区，padding和border额外加在外部，三列加起来轻松超100%，触发换行。这不是精度问题，是盒模型理解偏差。
- 必须显式写
box-sizing: border-box，让百分比宽度包含padding和border - 避免在
float元素上同时用padding和margin，容易叠加出不可控间隙 - 如果父容器有
font-size: 0清空空白符，记得子元素重设font-size，否则文字不显示
现代项目里还值得为float百分比精度折腾吗
不值得。除极少数需要兼容IE8的遗留系统，float布局已无必要坚持。Flex和Grid天然规避了这类舍入问题，且语义清晰、响应式友好。
立即学习“前端免费学习笔记（深入）”；
- Flex中
flex: 1或flex: 0 0 33.333333%由浏览器内部调度分配，不暴露像素级舍入过程 - Grid用
grid-template-columns: repeat(3, 1fr)，等分逻辑在布局引擎层完成，和像素精度无关 - 真遇到旧项目维护，优先加
overflow: hidden在父容器上防止float塌陷，比死磕百分比小数更省时间
精度损耗背后其实是布局模型的选择问题——盯着float的百分比修修补补，不如花十分钟把float换成display: flex。浏览器没变，只是你换了个更靠谱的工具。
