没有脱离文档流为什么子元素[外边距]还撑不起来父元素

[linuxsteam]

如题，小弟刚学前端 CSS 问题如图 网站 https://wfion.com

我开始排查问题得时候，只排查了 body 得 css 。请教前端同事了，他只知道我图中元素影响了 超出了 body 但是他不知道什么原因

[anjianshi]

如果“父元素的边缘”和“子元素的边缘”之间没有任何“会占用空间”的东西，那么子元素的 margin-top / margin-bottom 会穿透到父元素外面。

解决办法 1：父元素设置 overflow: hidden;
解决办法 2：子元素不要用 margin-top / margin-bottom ，改用 padding-top / padding-bottom

[Al0rid4l]

要用 margin 撑起父元素, 需要一个 XFC, 通常是 BFC, 很多属性可以触发, overflow, flow, position:absolute 等等, 不过标准一点的做法是直接给 body 一个 display: flow-root 完事, 其他方式副作用会多点

[linuxsteam]

@Al0rid4l 好的 谢谢 我都去研究下， 有人也建议让我学习 盒模型

[linuxsteam]

@anjianshi 好的 谢谢。 这种东西我都不知道咋学习了。 搜索也不会用关键字

[linuxsteam]

@anjianshi 我看网上说的是
当上下相邻的两个块级元素（兄弟元素）相遇时，如果上面的元素有下外边距 margin-bottom ，下面的元素有上边距 margin-top ，则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值之中较大的，这种现象被称为 margin 重叠

[linuxsteam]

@linuxsteam 抱歉 我弄错了，这是 margin 合并，父子元素是 margin 塌陷