百分比宽度在浮动中易超限，因width仅基于父容器content width计算，而实际占位需叠加padding、border、margin等；box-sizing:border-box可统一宽度基准，calc()可扣减间隙，flex布局则从根本上规避该问题。
百分比宽度在浮动中为何一算就超限
因为 width: 50% 这类声明只相对于父容器的 content width 计算，而浮动元素实际占位宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。只要父容器有哪怕 padding: 1px，两个 width: 50% 的浮动项加起来就必然超限——不是浏览器错了，是它老老实实把所有尺寸全加起来了。
常见诱因包括：
- 父容器用了默认
box-sizing: content-box，又设了padding: 12px - HTML 源码里两个
<div class="item"></div>之间有换行或空格，渲染出约4px间隙 - 写了
width: 33.33%但没考虑小数精度累加误差，三列总和实际为99.99%还好，100.01%就直接掉行 - 子元素本身有
border: 1px solid却没被计入百分比基数
用 box-sizing: border-box 统一宽度基准
这是最底层、最有效的调整起点。它让 width 指代的是“最终视觉宽度”，即自动包含 padding 和 border，所见即所得。
必须显式作用于每个浮动子元素，不能只写在父容器上（box-sizing 不继承）：
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}或者更精准地：
.float-item {
box-sizing: border-box;
width: 33.333%;
padding: 8px;
border: 1px solid #ccc;
}注意：表单控件如 <input>、<button> 默认仍是 content-box，混用时务必单独重置。
用 calc() 扣减 margin 和 HTML 间隙
box-sizing: border-box 解决了 padding 和 border，但 margin 和 HTML 换行符带来的间隙仍需手动控制。
典型场景与写法：
- 两列布局，每列带
margin-right: 12px（最后一列margin-right: 0）→ 写成width: calc(50% - 12px) - 三列等宽，左右各
margin: 6px→ 写成width: calc(33.333% - 12px) - 若间隙来自 HTML 换行，可对父容器设
font-size: 0，再对子项重置font-size
别依赖 overflow: hidden 或 clear: both 来“防换行”——它们不干预宽度计算，只影响高度包裹或定位避让。
为什么改用 display: flex 是更稳的选择
浮动本就不适合做多列等宽排列。当你开始反复调 calc()、手动清浮动、为不同缩放比例写兼容 hack 时，说明你已经在用错误工具解决正确问题。
Flex 布局天然规避这些陷阱：
- 父容器
display: flex后，子项默认横向排列，width百分比行为由 flex 规则接管，不再受盒模型溢出影响 - 用
gap控制间距，完全绕开margin累加问题 - 缩放时亚像素四舍五入由 flex 引擎统一处理，不会导致某列突然掉行
-
flex-wrap: wrap是显式可控的换行，而非浮动那种“算超了才挤下去”的被动行为
真正难的不是怎么调浮动，而是判断什么时候该停手——尤其当 getComputedStyle(el).width 返回 "199.99999999999997px" 这种值时，继续修 float 已经是在对抗渲染机制本身。
