浮动元素的 margin 不生效？先确认是否触发了 BFC
直接给浮动元素设 margin 看似合理，但常发现上下间距“消失”或“塌陷”——根本原因是浮动元素脱离文档流，其 margin 与父容器或其他非浮动块之间不再按常规盒模型计算。尤其当父容器没清除浮动时，margin-top 和 margin-bottom 往往视觉上无效。
解决前提是：让浮动元素之间的间距真正由 margin 控制，而不是靠父容器“猜”高度。关键一步是确保父容器形成 BFC（块级格式化上下文）。
- 给父容器加
overflow: hidden、overflow: auto或display: flow-root（推荐） - 避免用
float自身做清除，那会把父容器也拖进浮动流 -
display: flow-root是最干净的方案，不隐藏溢出、不影响布局语义
浮动元素间水平间距用 margin-right 最可靠
多个左浮动元素并排时，margin-right 能稳定控制它们之间的空隙；而 margin-left 容易导致首项多出空白（除非重置第一项的 margin-left: 0）。
.item {
float: left;
width: 200px;
margin-right: 16px; /* 所有元素右间距统一 */
}
.item:last-child {
margin-right: 0; /* 最后一个去掉右距，避免多余空白 */
}- 不要依赖
margin-left+:first-child，因为浮动顺序可能受 HTML 结构或响应式断点影响 - 若需响应式间距，用
@media单独覆盖margin-right，别改浮动逻辑 - 注意：IE8 及以下不支持
:last-child，如需兼容，可加 class 如is-last
垂直方向间距要靠父容器 padding 或伪元素撑开
浮动元素自身设 margin-bottom 对后续非浮动内容无效，对同级浮动元素也常“看不见”——因为它们在行框内堆叠，垂直间距实际由行高或父容器 padding 决定。
立即学习“前端免费学习笔记（深入）”；
- 更可控的做法：给父容器设
padding-bottom，统一拉开所有浮动子项与下方内容的距离 - 或用伪元素清除浮动并预留间隙：
parent::after { content: ""; display: table; clear: both; height: 16px; } - 避免用
margin-bottom在浮动元素上“硬撑”，它可能被折叠或被忽略
现代替代方案：别用 float 布局了
如果只是想实现等间距排列，float 已是过时方案。Flexbox 或 Grid 能直接用 gap 控制间距，语义清晰、无清除烦恼、响应式天然友好。
.container {
display: flex;
gap: 16px; /* 所有子项间统一间距，包括换行后 */
}
.item {
flex: 1; /* 或固定 width */
}-
gap在 Flexbox 中兼容 Chrome 29+/Firefox 28+/Safari 14.1+；Grid 中更早支持 - 若必须兼容 IE11，可用
display: -ms-flexbox+-ms-flex-pack，但gap仍不可用，此时退回到margin+:nth-child计算 - 浮动不是“不能用”，而是它的间距控制本质是副作用，不是设计目标
真正卡住的往往不是 margin 值设多少，而是没意识到浮动布局里“间距”从来就不是靠单个元素 margin 独立决定的。
