浮动元素换行主因是外边距参与布局计算导致空间不足；应优先用padding而非margin控制间距，父容器需用overflow:hidden或clear:both清除浮动以避免塌陷。
浮动元素为什么突然换行了
不是盒子变宽了，大概率是外边距在捣鬼。浮动元素的 margin 会和父容器、兄弟元素发生意外的“撑开”或“抵消”，尤其当相邻浮动元素有 margin-right 或 margin-left 时，浏览器可能判定剩余空间不足，直接把下一个浮动元素挤到下一行。
- 常见现象：
float: left的两个div，明明宽度加起来没超父容器，第二个却掉下去了 - 典型诱因：左侧浮动元素设置了
margin-right: 20px，但父容器宽度刚好卡在“内容宽 + margin”临界点上 - 注意：IE6/7 中
margin双倍问题更明显；现代浏览器虽修复了双倍，但外边距参与布局计算的逻辑没变 - 验证方法：用开发者工具临时删掉所有
margin，看是否恢复单行——如果恢复，基本就是它
用 margin 还是 padding 控制浮动间距
优先用 padding 给浮动容器内部留白，而不是靠 margin 推隔壁元素。因为 padding 不参与浮动元素之间的空间竞争，不会触发重排换行。
-
margin是“推别人”，影响外部布局流；padding是“撑自己”，只扩大当前浮动块的占位面积 - 如果必须用
margin（比如要和非浮动元素对齐），统一用margin-right（左浮动时）或margin-left（右浮动时），避免左右都设导致不可控叠加 - 慎用
margin: auto：浮动元素上无效，不会居中，还可能引发渲染异常
clear 和 overflow 怎么选来收尾浮动
浮动脱离文档流后，父容器高度塌陷，常连带引发换行错位。这时不能只盯着浮动子元素调 margin，得先解决父容器“看不见孩子”的问题。
-
clear: both放在浮动之后的元素上，能强制换行并撑开父容器——适合明确知道浮动结束位置的场景 -
overflow: hidden（或auto）加在父容器上，触发 BFC，自动包含浮动——更通用，但要注意可能截断阴影、下拉菜单等溢出内容 - 别用
height: 1px或空div清除浮动：冗余、语义差，且在 flex/grid 布局中已过时
现代替代方案：为什么现在少用 float 做布局
不是 float 不能用，而是它本就不是为复杂布局设计的。CSS Grid 和 Flexbox 天然规避了外边距换行这类问题，控制力更强、代码更直白。
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏等固定结构，用
display: grid配grid-template-columns更稳，margin不再影响列数 - 导航、卡片列表等线性排列，
display: flex的gap属性直接定义间距，完全绕开浮动外边距的歧义 - 仍需兼容 IE8–9？那得接受浮动 +
clearfix的组合，但务必统一用margin方向，避免混用left/right
浮动换行的本质，是外边距在脱离文档流后的“不可见参与”。真正难的不是算像素，而是意识到：你调的不是间距，是在和浏览器的浮动重排逻辑博弈。
