父子元素可能因无阻隔发生margin折叠，导致布局异常；通过添加border、padding或创建BFC可阻止该现象，确保子元素margin在父元素内部生效。
在CSS中，外边距折叠（margin collapse） 是指两个垂直方向的margin相遇时会合并成一个margin的现象。很多人知道相邻兄弟元素之间会发生margin折叠，但对父子元素之间的margin折叠理解不够清晰，容易引发布局问题。
父子元素也可能发生margin折叠
当父元素没有“阻挡”子元素margin传播的条件时，子元素的上或下margin可能会与父元素的margin发生折叠。这种情况通常出现在：
- 父元素没有border、padding、inline content等阻断因素
- 子元素的margin-top与父元素的margin-top“接触”
- 父元素未创建BFC（块级格式化上下文）
此时，子元素的margin-top并不会真正“推开”父元素内部，而是与父元素自身的margin-top合并，导致父元素整体向下移动——看起来像是父元素的margin变大了，而子元素没被推下去。
如何避免父子margin折叠
要阻止这种意外的折叠行为，可以通过以下几种方式“隔离”父子margin：
立即学习“前端免费学习笔记（深入）”；
- 给父元素添加 border 或 padding：哪怕加 border: 1px solid transparent 都行，只要有border或padding，就能阻断折叠
- 让父元素创建BFC：通过设置 overflow: hidden、display: flow-root 等属性，使父元素成为独立的布局环境
- 使用 padding 代替 margin：如果目的是留白，考虑用父元素的padding来实现，更可控
- 将子元素变为 inline-block 元素：非块级元素不会参与margin折叠
实际例子说明
假设你有如下结构：
内容
如果CSS是：
.parent {
margin-top: 20px;
background: #eee;
}
.child {
margin-top: 30px;
height: 50px;
background: lightblue;
}
你会发现 .child 并没有在父元素内向下推30px，反而整个 .parent 向下移动了30px（取两者margin最大值），这就是典型的父子margin折叠。
解决方法比如：
.parent {
margin-top: 20px;
overflow: hidden; /* 触发BFC */
background: #eee;
}
这样 .child 的 margin-top 就会在父元素内部生效，不再与父元素折叠。
基本上就这些。理解父子间的margin折叠关键在于意识到“没有阻隔就会合并”，只要稍加干预就能控制布局行为。
