浮动元素加margin后换行，本质是总宽度超限：浏览器按width+padding+border+margin累加实际占宽，超父容器即折行；需用box-sizing:border-box、calc()扣减间距，并避免html空格干扰。
浮动元素加margin后换行，本质是总宽度超限
不是margin“导致”换行，而是它参与了水平空间计算，让浮动项实际占宽超过了父容器可用宽度。浏览器严格按盒模型累加：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right，只要总和 > 父容器宽度，就必然折行。
常见误判点：设了width: 33.33%，又加margin: 10px，以为“百分比能自适应”，结果每项多出20px，三列就超100%+60px——哪怕父容器宽600px，三项也至少要660px才不换行。
- 用开发者工具看“Computed”面板里的
total width，别信width那一栏 -
box-sizing: border-box必须加在所有浮动项上，否则padding和border会额外加宽 - 如果用
margin-right控制间距，只给非末项设，例如.item:not(:last-child) { margin-right: 12px; }
float:left + margin-right 的典型踩坑场景
两个都float: left的元素，左边那个设margin-right: 20px，右边那个没设——看起来合理，但一旦父容器缩窄，右边那个可能因自身width + 左侧margin已逼近临界值，再加自己默认的margin（比如重置样式漏了）或border就直接溢出。
更隐蔽的是HTML空格：浮动元素之间若有换行或空格，渲染器会插入约4px间隙，等效于多了一个margin，尤其在font-size较大时更明显。
- 浮动项之间不要写换行或空格，写成
<div class="item"></div> <div class="item"></div>连写 - 避免对同一元素同时设
margin-right和margin-left，容易重复计算 - IE8及更早版本对负
margin处理异常：它会把负值从父容器width中减去，导致父容器变窄，连锁引发其他浮动项换行
为什么clear:both不能解决换行问题
clear: both不是“阻止换行”的开关，它只是让**当前元素**避开上方浮动兄弟。给浮动元素自己加clear: left完全无效；把clear: both写在浮动容器外的<footer></footer>上，中间隔着未清除的父容器，也起不了作用。
换行是布局计算阶段的事，clear发生在渲染阶段，它不改变浮动项本身的宽度占用，也不影响同行判定逻辑。
- 真正需要的是控制宽度总和，不是事后“清”
- 若想视觉上“撑满一行”，优先用
calc(33.33% - 12px)扣减margin占用，而不是靠clear硬拉 -
overflow: hidden或display: flow-root可让父容器包裹住浮动子项，但它不干预换行决策，只解决塌陷
现代替代方案里margin还重要吗
在display: flex或display: grid下，margin依然控制间距，但不再承担“是否换行”的决定权。flex-wrap: wrap由容器统一控制换行时机，子项只需专注自身尺寸和gap（推荐替代margin做间隔）。
如果你还在维护老项目、必须用float，那margin就是精度控制的关键变量；但新项目里，它已退居为辅助手段，gap、justify-content和flex-basis才是间距与换行的主力。
最易被忽略的一点：浮动布局对小数像素极其敏感，width: 25%在某些分辨率下算出来是123.73px，加上margin: 2px就变成127.73px，四列加起来可能刚好超1px——这种误差肉眼难查，但足以触发换行。用flex能规避这类计算抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
