子元素div的负margin-bottom无法抵消父元素margin问题求助

问题分析 #

你给父元素#parent设置了上下外边距各40px，想用子元素#child2的负margin（margin-top:-40px和margin-bottom:-40px）抵消，但只有负margin-top生效，负margin-bottom没起作用。核心原因是：

• 父元素#parent的高度由#child1决定，而#child1是默认块级元素，未触发BFC（块格式化上下文），无法包含内部子元素的负margin-bottom，导致这个负margin无法向上传递影响#parent的底部空间。

修复方案 #

给#child1添加overflow: hidden触发BFC，它会强制包含内部所有元素的布局（包括负margin），让#child2的负margin-bottom生效，抵消#parent的margin-bottom。

修复后的CSS代码 #

#parent {
  background-color: blue;
  margin-bottom: 40px;
  margin-top: 40px;
}

#child1 {
  background-color: red;
  overflow: hidden; /* 新增：触发BFC */
}

#child2 {
  height: 200px;
  background-color: yellow;
  margin-top: -40px;
  margin-bottom: -40px;
}

原理补充 #

BFC的特性之一是包含内部元素的margin，不会让子元素的margin穿透到外部。默认情况下，块级元素的子元素margin会和父元素产生折叠，负margin也需要BFC来约束，才能让父元素感知到子元素的负margin并调整自身布局空间。

内容的提问来源于stack exchange，提问作者nishant mudgal