CSS浮动导致的父元素外边距消失_理解盒子模型的塌陷

父容器 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 写错了，而是布局模型本身已过载

浮动导致的外边距异常，本质是文档流断裂后的连锁反应。修复的关键从来不是“把 margin 调大一点”，而是让参与计算的容器重新获得高度感知能力——这点，比记住十个清除 hack 都重要。