加 border-top: 1px solid transparent 能阻止外边距合并，因其创建非空边界中断合并；但更推荐语义清晰、无副作用的 display: flow-root 触发独立 bfc。
浮动本身不触发外边距合并，但会让父容器“塌陷”，进而使父元素和它的兄弟元素共处同一个 BFC，最终导致它们的垂直 margin 合并——这不是浮动的 bug，是 CSS 渲染规则的连带结果。
为什么加 border-top: 1px solid transparent 能阻止合并
只要两个可能合并的 margin 之间存在「非空的边界」，合并就中断。透明边框满足两个硬条件：计算后 border-width > 0，且属于块级盒的边界框（box border edge）。
-
border: none或border: 0不生效，因为计算值为 0 -
border-top: 0.01px solid transparent理论上也行，但部分旧浏览器可能四舍五入归零，稳妥起见用1px - 副作用小：透明边框不影响视觉，但会略微增加盒模型尺寸（需在布局计算中预留）
- 不推荐用于需要精确高度控制的场景，比如内联对齐或 lineHeight 敏感的文本容器
更推荐用 display: flow-root 触发 BFC
加边框是“物理阻断”，而 display: flow-root 是语义化地创建一个独立渲染上下文，让父容器真正“兜住”浮动子元素，并天然隔离内外 margin。
- 它不会改变元素的文档流位置，也不裁剪
box-shadow或position: absolute子元素 - 兼容性已覆盖主流浏览器：Chrome 64+、Firefox 59+、Safari 12.1+、Edge 79+
- IE 完全不支持，但若项目已放弃 IE，这是当前最干净的解法
- 比
overflow: hidden更精准——后者可能意外隐藏下拉菜单或动画溢出内容
哪些写法看似能用，其实埋了坑
有些常见做法短期有效，但长期维护成本高或行为不可控。
-
overflow: auto：在移动端可能触发不必要的滚动条（尤其当内容高度刚好等于容器时） -
float: left在父容器上：会让父容器自身也脱离文档流，影响后续布局链 -
display: inline-block：会引入空白符间隙，且垂直对齐方式（vertical-align）容易引发意外交错 - 伪元素
::before+margin-bottom: 1px：可行，但多一层 DOM 干预，调试时容易被忽略
真正关键的不是“怎么加一行样式”，而是理解：外边距合并只发生在同一 BFC 内；浮动只是导火索，BFC 缺失才是根源。一旦意识到这点，display: flow-root 就不再是“一种方案”，而是默认首选——除非你正被迫维护一个仍需兼容 IE11 的老系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
