为什么兄弟元素之间 display:inline-block 能防止 margin塌陷 ？-灵析社区

问一个关于BFC清除兄弟间margin塌陷的问题。希望有人从原理上解答解答。 如图，有两个块级元素发生垂直方向上的**margin塌陷** 。  常见的做法有两种，第一种，将下方元素用另一个BFC包裹起来，这种我能理解，因为BFC之间互不影响嘛。  第二种：为下方元素设置浮动或绝对定位或`display:inline-block`。 浮动或绝对定位我也能理解，脱离普通文档流了嘛。 `display:inline-block`我不是很懂，是因为生成了IFC，BFC和IFC之间不发生重叠？ **注意：** 如果此时只是给``设置`overflow:hidden`,`display:flex`,`display:table-cell`等使其生成BFC都不会发生作用。  代码如下： Document * { margin: 0; padding: 0; } .first { margin: 100px; background: lightgreen; border: 1px solid; width: 100px; height: 100px; } ul { /* display: inline-block; */ /* position: fixed; */ /* float: left; */ margin: 100px; background: lightblue; border: 1px solid; width: 200px; } li { margin: 10px 20px; } --> item1 item2 item3 --> 希望有人能解答一下关于下方元素设置`dispaly:inline-block`可以解决`margin塌陷`的原理。