前端 Margin-top 父类自动改变的问题

Question

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

如图 父子关系:A>B>C>D
我在给D(

)设置margin-top时候并不是以父级C为标准 而是以页面顶部 但是设置margin-left 又是以C为标准
一直没想明白

我的解答思路和尝试过的方法

我尝试给C加上float:left 能够解决 但是没想清楚原理 有dl帮帮忙吗

我想要达到的结果

Answer 1

空白边叠加的问题，合并外边距与BFC（或者 margin叠加）
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

水平方向的外边距永远不会坍塌。

下面这篇文章又详细说明

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)_iteye_5904的博客-CSDN博客 BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。 什么是BFC（Block formatting contexts）w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks... https://blog.csdn.net/iteye_5904/article/details/82671081