overflow与display:inline-block开启bfc的理解

前言：

        翻阅诸文，多为名词堆砌，ctr+cv，未详尽其理，如隔靴挠痒，吾今日浅学试解之，然是一家之言，毋耻笑而。

疑惑：

        外边距问题，发现给盒子直接添加overflow并不能解决外边距折叠，而直接添加display:inline-block却可以。

正文：

        开启bfc是作用于盒子的内部子元素：所以对盒子直接使用ovflow:hidden时，box1与box2相邻同属于一个布局空间里（html的bfc里），垂直外边距依然折叠。

        正如网上所写，我们给box1套一个box时，并ovflow：hidden开启bfc，相邻2个盒子外边距不会折叠。box1在box的bfc里，box2在html的bfc里。（类似把外面box盒子撑大，在box盒子里为所欲为。视觉上看起来是box1和box2的外边距为200。如果box未开启bfc，height为auto，box和box1同属于html的bfc，会折叠，box与box2相邻依然同属于html的bfc，再次折叠）

        但当我们尝试用inline-block如何开启bfc的尼？应该作用于开启bfc的盒子内部元素，为什么我直接设置inline-block，2个盒子外边距也不会折叠/传递。

        box与box1相邻同属于html的bfc，发生外边距折叠/传递。

         给box1加上ovflow：hidden开启bfc

         行内盒子：由行内元素组成，看作一个个盒子

         行盒：由行内盒子组成的水平盒子，类似于黄线所划

          当box1设置为inline-block时，就会像一个行内盒子一样水平排列，仍可设置垂直的margin（行内非替换元素设置垂直的margin无效），撑起了行盒的高度？（🤔️）当span设置vertical-align：top可看出。而外边距折叠/传递的条件是：相邻的块元素之间，所以行盒并不会将外边距传递给box，视觉上看上去box1距离box有100px的距离。