浮动元素的margin参与总宽度计算，总宽度=width+padding+border+margin；box-sizing:border-box必须作用于每个浮动项；空格和负margin易引发隐性换行；clear:both不修复换行，应从宽度源头解决。
浮动元素的margin参与总宽度计算
浮动元素的 margin 会直接加进「实际占宽」，不是“看起来多了一点”，而是浏览器真把它算进去了：总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。只要这个和超过父容器宽度，必然换行。
常见错觉是：“我设了 width: 33.33%，三列应该刚好”，但若每项还加了 margin: 10px，那每项实际多占 20px，三列就多出 60px —— 父容器哪怕宽 600px，也至少需要 660px 才能不折行。
验证方法：用开发者工具选中元素，看「Computed」面板里的 total width，别只信 width 那一栏。
box-sizing: border-box 不能省略
没加 box-sizing: border-box 的浮动项，padding 和 border 会额外撑宽，再加上 margin，很容易超限。比如 width: 50% + padding: 10px + border: 1px + margin: 5px，实际宽度远超 50%。
立即学习“前端免费学习笔记（深入）”；
box-sizing: border-box 必须加在所有浮动子元素上，否则它只对当前元素生效，无法统一控制累加逻辑。
- 只给父容器设无效，必须作用于每个浮动项
- 配合
calc(50% - 10px)扣减margin占位更可控 - 避免用
width: 100%套浮动项——它不自动扣减margin和padding，极易溢出
HTML空格和负margin的隐性干扰
浮动元素之间若有换行或空格（比如写成 <div class="item"></div>\n<div class="item"></div>），渲染器会插入约 4px 文本间隙，等效于多了一个未声明的 margin。尤其在 font-size 较大时更明显。
负 margin 更要小心：当 width 是固定值（如 width: 200px）时，margin-left: -20px 不会扩大元素本身宽度，只会让它左移；但若 width: auto，负 margin 反而会让元素变宽（因为浏览器为满足盒模型等式，会增大 content 区）。
- 浮动项之间建议连写：
<div class="item"></div><div class="item"></div> - 用
:not(:last-child)控制间隔，避免两个相邻项都设margin-right - IE8 及更早版本对负
margin处理异常：它会从父容器宽度里减去该值，导致连锁换行
clear:both 不是换行修复开关
clear: both 的作用对象是「当前元素自身」，不是它的兄弟浮动项。给浮动元素自己加 clear: left 完全无效；把 clear: both 写在浮动容器外的 <footer> 上，中间隔着未清除的父容器，也起不了作用。
真正要解决换行，得回到宽度源头：要么压窄每个浮动项的实际占宽（box-sizing + calc），要么换布局方式（display: flex + gap 更稳）。
浮动对宽度极其敏感，与其反复调 margin 和 width，不如先确认父容器真实渲染宽度有没有被 zoom、transform 或 max-width 意外压缩——这些比 margin 更难察觉。
