浮动元素的 margin 不会折叠，因脱离文档流；常见间距问题实为父容器塌陷或文字环绕所致；padding 在浮动中可控但影响子元素可用空间；清除浮动后 margin 才正常渲染；IE6–8 存在双倍 margin bug。
浮动元素的 margin 折叠根本不会发生
浮动元素脱离普通文档流，margin 不会和相邻块级元素发生折叠——这是很多人调半天间距没效果的根源。你看到的“间隙变小”，往往不是折叠，而是浮动后父容器高度塌陷、文字环绕、行框挤压等副作用造成的视觉错觉。
实操建议：
- 检查是否误以为
margin-bottom没生效，其实是父容器没包住浮动子元素，导致后续内容“上移”了 - 用
outline: 1px solid red临时勾勒浮动元素边界，确认它的真实位置和尺寸 - 不要依赖浮动元素之间的
margin来控制水平间距；改用margin-right+ 清除最后一项的右距，或直接用gap（配合display: flex替代浮动）
padding 在浮动容器内部的行为很老实
padding 对浮动布局来说反而是最可控的部分：它老老实实撑开内容区，不影响浮动逻辑，也不会触发奇怪的重绘。但容易被忽略的是——它会影响浮动子元素的可用空间。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给浮动容器设了
padding: 20px，结果内部浮动的div贴边溢出，因为没预留内边距空间 - 用
box-sizing: border-box后仍出问题，其实是忘了子元素的width: 100%是相对于父容器 content box 计算的，而 padding 占了额外像素
实操建议：
- 若子元素需填满父容器可视区域，设
width: calc(100% - 40px)（对应左右padding各 20px） - 更稳妥的做法是：浮动容器用
box-sizing: border-box，子元素不写width，靠浮动自然收缩或用flex再包裹一层
清除浮动后 margin 的表现才回归正常
只有在浮动被真正清除（比如用了 clear: both 或 BFC 触发）之后，后续元素的 margin 才会按标准盒模型渲染。否则，它可能被“吸”到浮动元素下方、被行框挤扁，甚至完全不可见。
使用场景：
- 卡片列表末尾加一个分隔线，结果线贴着上一张卡片底部——大概率是没清浮动，
margin-top被吞了 - 用
::after伪元素清除浮动时，忘记设display: table或block，导致清除失效
实操建议：
- 优先用
overflow: hidden或display: flow-root触发 BFC，比clear更干净，且能保住父容器margin - 如果必须用
clear，确保清除元素本身是块级、非浮动，并且紧跟在浮动组之后
IE6–8 下的双倍 margin bug 还真得防
老版本 IE 对浮动元素的 margin 会重复计算一次——比如写了 margin-left: 10px，实际渲染成 20px。这不是兼容性“选项”，是真实存在的 bug，至今仍有遗留系统要支持。
性能 / 兼容性影响：
- 加
display: inline可修复该 bug，但它只对 IE6–7 有效，且可能破坏其他样式 - 现代项目通常不用管，但如果接手老后台，打开开发者工具看 computed 样式里
margin-left是不是翻倍了，就能快速定位
实操建议：
- 用条件注释或 CSS hack（如
*margin-left: 5px）单独喂给 IE6–7 - 更推荐直接升级布局方案：把浮动换成
display: inline-block（需处理空白符）或 Flex
浮动布局本身正在退出主流，但存量代码里那些“看起来没毛病”的 margin 和 padding 组合，往往卡在清除时机、盒模型理解偏差、以及浏览器旧 bug 的交叉点上。改一行 display 可能比调十行 margin 更省事。
