父容器 margin 看不见是因为浮动导致其高度塌陷为0，需通过创建BFC（如display: flow-root）修复；现代布局应优先使用flex+gap替代float。
父容器 margin 看不见？先查 computed height 是不是 0
浮动元素脱离文档流，父容器根本“看不见”它们的高度，自然也不会为它们预留 margin 的空间。你写的 margin-top: 20px 没丢，只是没地方撑开——父容器的 height 在开发者工具里显示为 0px 或极小值，就是最直接的证据。
- 用浏览器 DevTools 选中父容器，看
Computed面板里的height和border是否渲染出来 - 如果
height是0，那所谓“外边距消失”，其实是父容器塌陷后，子元素的 margin 被“悬空”在了文档流之外 - 别急着调子元素的
margin，先让父容器重新“感知”到子元素的存在
清除浮动 ≠ 给父容器加 clear: both
clear: both 是作用在**自身**上的属性，意思是“我这个元素要避开上方所有浮动”，它对父容器高度毫无影响。给父容器写 .container { clear: both; } 完全无效，属于常见误操作。
- 真正有效的做法是让父容器**建立 BFC（块级格式化上下文）**，从而强制包含浮动子项
- 推荐优先用
display: flow-root：一行代码、无裁剪风险、语义清晰 - 兼容老浏览器时，
overflow: hidden仍可靠，但要注意可能意外隐藏position: absolute子元素的溢出内容 - 伪元素方案
::after也行，但必须同时满足三个条件：content: ""、display: table（或block）、clear: both
浮动元素之间的 margin 为什么“只有一边生效”
左浮动元素并排时，margin-right 能稳定控制间距，而 margin-left 很容易在第一个元素上多出一截空白——因为 HTML 顺序和浮动方向共同决定了“谁挨着谁”，:first-child 并不总是可靠的参照点。
- 统一用
margin-right+:last-child { margin-right: 0; }更稳妥 - 垂直方向的
margin-bottom对后续非浮动内容基本无效，它不会推开下面的段落，因为两者不在同一文档流层级 - 想控制浮动块与下方内容的距离，应该给父容器设
padding-bottom，而不是依赖子元素的margin-bottom - IE8 及以下不支持
:last-child，如需兼容，得手动加 class（如is-last）
别硬扛 float 了，gap + flex 才是解药
如果你只是想实现等宽/等距排列，还卡在 float + margin + clearfix 的组合里，等于主动给自己埋坑。现代布局里，gap 是专为间距设计的属性，flex 自动创建新格式化上下文，天然规避 margin 塌陷。
立即学习“前端免费学习笔记（深入）”；
-
.container { display: flex; gap: 16px; }—— 所有子项间统一间距，换行后依然生效 -
gap在 Chrome 29+/Firefox 28+/Safari 14.1+ 已稳定支持；Grid 中支持更早 - 若必须兼容 IE11，
gap不可用，此时退回到margin-right+:nth-child计算，但别再用float布局主体结构 - 真正难的不是怎么清浮，而是意识到：当 margin 表现诡异时，大概率不是 margin 写错了，而是布局模型本身已过载
