应统一设置box-sizing: border-box，使border和padding计入width内，避免浮动元素总宽超限导致错位或换行；同时配合伪元素清浮动，并优先采用flex或grid布局替代浮动。
浮动元素紧贴容器边缘时出现1px空隙怎么办
这不是浏览器bug，是box-sizing默认值和border/padding计算方式共同导致的视觉偏差。当给浮动元素设了border或padding，又没改box-sizing，它的总宽度就超出了父容器分配的可用空间，被迫换行或错位。
- 典型现象：两列浮动布局中，右边那列突然掉到下一行，或者右边缘露出1–2px空白
- 根本原因：
box-sizing: content-box（默认）下，width: 50%+border: 1px solid= 实际占宽 > 50% - 解决动作：给所有参与浮动的元素统一加
box-sizing: border-box - 别只写在浮动元素上——父容器如果有
padding也得一起算进去，否则子元素width: 100%仍会溢出
为什么box-sizing: border-box能治浮动错位
它把border和padding直接“吃”进width里算，而不是额外加在外面。原来width: 200px; padding: 10px; border: 1px总宽222px，现在就是稳稳200px。
- 兼容性没问题：
box-sizing从IE8开始就支持，现代项目可放心全局启用 - 推荐写法：
* { box-sizing: border-box; }，但注意重置表单控件样式（如input[type="search"]可能需单独回调） - 浮动本身不依赖
box-sizing，但它让尺寸控制变得可预测——这才是关键
浮动容器高度塌陷 + 边缘偏差的组合问题
父容器没高度，子元素浮动后脱离文档流，导致父容器无法包裹内容，进而让外边距、背景色、边框都失效，边缘对齐自然乱套。
- 别用
overflow: hidden硬清浮动——它可能裁剪阴影、下拉菜单等溢出内容 - 更稳妥的清浮动方案：
::after伪元素 +clear: both，配合display: table避免IE6/7兼容问题 - 清浮动之后再检查：父容器是否设置了
padding？子元素width是否按border-box逻辑重新计算？
现代替代方案：浮动真没必要硬扛了
如果项目支持IE11+，display: flex或display: grid能彻底绕过这些像素级纠偏工作。
立即学习“前端免费学习笔记（深入）”；
-
flex布局中，flex: 1自动均分剩余空间，gap控制间距，完全无视box-sizing影响 - 但要注意：旧代码里混用浮动和flex，可能因元素脱离文档流导致意外重排
- 过渡期建议：新模块用flex，老模块先加
box-sizing: border-box兜底，别强行统一重构
事情说清了就结束。真正麻烦的不是1px偏差，而是它常和清浮动、盒模型、父容器padding三者咬在一起，改一处，另外两处跟着飘。
