浮动元素加margin后换行是因为其脱离文档流但外边距仍参与父容器宽度计算，当总宽度超限时强制换行；解决需用calc()按(n−1)个间隙计算单个元素宽度，并开启box-sizing:border-box。
浮动元素加 margin 后为什么总换行？
因为 float 元素脱离文档流，但其外边距仍参与父容器的宽度计算；当所有浮动子元素的宽度 + margin-left + margin-right 超过父容器宽度时，浏览器会强制换行——哪怕你只多出 1px。
常见错误是直接写 margin: 0 10px，却没同步缩减每个元素的 width。比如父容器宽 1000px，放 4 个浮动块，每个设 width: 250px + margin: 0 10px，实际占用宽度是 4 × (250 + 20) = 1080px，必然换行。
- 解决思路：让「单个元素宽度」=
(容器宽度 − 总间距) ÷ 元素个数 - 若 4 列、左右各留 10px 间距（即每元素左右共 20px 间隙），但首尾不需要外侧 margin，则总间距 =
3 × 20 = 60px（n 个元素有 n−1 个间隙） - 因此每个元素宽度应为
(1000 − 60) ÷ 4 = 235px
用 calc() 避免手动算错宽度
硬编码易出错，尤其响应式场景下容器宽度变化时。用 calc() 让浏览器实时计算更可靠：
.item {
float: left;
width: calc((100% - 3 × 20px) / 4); /* 4列，3个20px间隙 */
margin: 0 10px;
}
注意：calc() 内运算符两侧必须有空格，否则解析失败；3 × 20px 不能写成 60px——后者无法随列数变化自动适配。
- 若列数动态变（如媒体查询切 2/3/4 列），每套规则里独立写
calc()表达式 - 不要对
float元素同时设display: inline-block，会导致空白符干扰和 margin 叠加异常 - IE9+ 支持
calc()，但 IE9 不支持calc()里的vw/vmin单位
清除浮动后容器高度塌陷，间距看起来“消失”了
父容器没有高度，导致后续元素紧贴浮动内容下方，视觉上像间距被吞掉。这不是 margin 失效，而是布局上下文丢失。
- 最简修复：给父容器加
overflow: hidden或overflow: auto（触发 BFC） - 更可控方式：在最后一个浮动元素后加清空元素
- 现代替代方案：改用
display: flex或display: grid，但若必须兼容 IE8–9，则只能靠浮动 + 清除
margin 在不同方向上对齐效果不一致
浮动本身只影响水平流向（float: left 从左向右堆，float: right 从右向左），但 margin-top/margin-bottom 仍有效。问题常出现在垂直对齐需求中：
-
margin-top能正常起作用，但相邻浮动元素的margin-bottom不会叠加（浮动元素不在普通文档流中，垂直 margin 不折叠） - 想实现等高行距？别依赖
margin-bottom，改用line-height配合内联元素，或给父容器设固定min-height - 如果需顶部对齐且有不同高度的内容，建议统一设
vertical-align: top（仅对inline-block有效），浮动元素本身不响应该属性
实际项目里最容易漏的是间隙数量与列数的关系——写成 n × margin 而不是 (n−1) × margin，结果永远差一列。另外，box-sizing: border-box 必须全局开启，否则 padding 和 border 会额外撑开宽度，让 calc 计算彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
