浮动盒子掉行是因兄弟元素实际宽度（含padding、border、margin）总和超过父容器可用宽度，触发CSS规范强制换行；calc()可精准控制宽度，Flex/Grid则天然规避该问题。
浮动盒子掉行是因为总宽度超出了父容器
浮动元素脱离文档流后，浏览器仍会按“视觉宽度”判断是否换行——哪怕父容器有足够空白，只要兄弟浮动盒子的 width + padding + border + margin 之和 ≥ 父容器可用宽度，就会强制换行。
这不是 bug，是 CSS 规范对 float 的原始定义：浮动块必须完整容纳在当前行内，否则就另起一行。
- 父容器宽度为
600px，两个子盒都设width: 300px，但各自还有padding: 10px和border: 1px solid→ 实际占宽各为322px，两盒合计644px>600px，必掉行 - 即使只差
1px，也会触发换行；浏览器不会做小数像素四舍五入或压缩 -
box-sizing: border-box能把padding和border算进width里，但margin始终外置，必须单独扣减
用 calc() 动态扣减 margin 和间隙
手动算像素容易漏掉 margin 或写死数值，响应式下更难维护。直接在 width 上用 calc() 更可靠。
假设父容器 width: 100%，两列等宽，中间留 20px 间距（用 margin-right 实现），那么每列应为：calc((100% - 20px) / 2)。
立即学习“前端免费学习笔记（深入）”；
div.left {
float: left;
width: calc((100% - 20px) / 2);
margin-right: 20px;
}
div.right {
float: left;
width: calc((100% - 20px) / 2);
}- 不要写成
width: 50%+margin-right: 20px—— 这会让总宽变成100% + 20px，肯定掉行 - 如果用了
border或padding，且没设box-sizing: border-box，得把它们也加进calc()的减项里 - IE9+ 支持
calc()，但 IE9 不支持calc()里混用单位（如100% - 1em），纯 px/% 组合更稳妥
清除浮动本身不解决掉行，只是收尾手段
clear: both 或伪元素 ::after 清除浮动，只是让父容器能正确包裹子元素、避免高度塌陷，它**完全不影响浮动盒子是否掉行**。
- 掉行发生在浮动布局阶段，清除浮动发生在后续渲染阶段，两者时间上不重叠
- 你看到“清浮动后不掉行了”，大概率是顺手改了宽度或删了 margin，不是清除动作起的作用
- 如果父容器本身设了
overflow: hidden，看起来像“没掉行”，其实是溢出内容被裁剪了，实际仍发生了换行
现代替代方案比硬刚 float 更省心
除非要兼容 IE8 及更老浏览器，否则真没必要死磕 float 布局。Flexbox 或 Grid 天然规避掉行问题，语义也更清晰。
比如两列等宽带间隙，Flex 一行搞定：
.container {
display: flex;
gap: 20px;
}
.container > div {
flex: 1;
}-
gap是独立于盒模型的间隙，不参与宽度计算，不会导致掉行 - Flex 子项默认不换行（
flex-wrap: nowrap），即使内容超宽，也会收缩而非跳行 - 旧项目升级时注意：Flex 会改变子元素的块级/内联行为，某些
display值（如table-cell）可能失效
盒模型计算这件事，本质是跟浮动时代的遗留约束较劲。越往细处调像素，越容易在缩放、字体变化、DPR 切换时翻车。该换布局方式的时候，就别在 float 的 margin 里反复试错了。
