前言：

????????翻閱諸文，多為名詞堆砌，ctr+cv，未詳盡其理，如隔靴撓癢，吾今日淺學(xué)試解之，然是一家之言，毋恥笑而。

疑惑：

????????外邊距問題，發(fā)現(xiàn)給盒子直接添加overflow并不能解決外邊距折疊，而直接添加display:inline-block卻可以。

正文：

????? ? 開啟bfc是作用于盒子的內(nèi)部子元素：所以對盒子直接使用ovflow:hidden時，box1與box2相鄰?fù)瑢儆谝粋€布局空間里（html的bfc里），垂直外邊距依然折疊。

?????

????????正如網(wǎng)上所寫，我們給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，再次折疊）

????????但當(dāng)我們嘗試用inline-block如何開啟bfc的尼？應(yīng)該作用于開啟bfc的盒子內(nèi)部元素，為什么我直接設(shè)置inline-block，2個盒子外邊距也不會折疊/傳遞。

????????box與box1相鄰?fù)瑢儆趆tml的bfc，發(fā)生外邊距折疊/傳遞。

?????????給box1加上ovflow：hidden開啟bfc

?????????行內(nèi)盒子：由行內(nèi)元素組成，看作一個個盒子

????? ? ?行盒：由行內(nèi)盒子組成的水平盒子，類似于黃線所劃

????????? 當(dāng)box1設(shè)置為inline-block時，就會像一個行內(nèi)盒子一樣水平排列，仍可設(shè)置垂直的margin（行內(nèi)非替換元素設(shè)置垂直的margin無效），撐起了行盒的高度？（???）當(dāng)span設(shè)置vertical-align：top可看出。而外邊距折疊/傳遞的條件是：相鄰的塊元素之間，所以行盒并不會將外邊距傳遞給box，視覺上看上去box1距離box有100px的距離。

????????