margin collapsing

　　前一段時間也學習過margin collapsing，就是在同一BFC下，相鄰的margin之間若是沒有border，padding，content，clear時會出現外邊距疊加的現象，不過那時看到寒冬前輩博文裏說，水平方向也會存在margin collapsing，着實有點愣了，額~該楞完了。

　　圖中代碼是copy寒冬前輩的，左爲IE11，能夠看出在IE中，水平方式出現margin collapsing了。

　

　　但是我不明白的是，爲何會有下面的狀況出現：

　　水平方向呢~難道只有上面的神圖有這功能，我在想，也許writing-mode把div翻轉了180度？？好吧事實證實，不是的：

　　能夠看出，各個邊一一對應，沒翻轉，這個過程有個小收穫，在IE下，先定義border粗細等，再分別設置各個邊顏色是沒效果的，其餘瀏覽器也是各類詭異。這是後面樣式覆蓋了前面樣式的結果，因此5px，solid效果出不來，還有各類搭配方式，總之，不要幹這種事啦。

　　 迴歸正題，來看看它垂直的狀況吧~

　　額~左邊IE下div垂直的collapsing不見了，介個嘛，仍是回到writing-mode吧，初看它時讓我又驚又喜，由於經過它，我帶着這故事的主角（上方的3個div）在屏幕上游了一圈，這讓我聯想帶水流，或許應該說margin collapsing是同一BFC下，在頁面寫入流的方向上，相鄰的margin之間若是沒有border，padding，content，clear時會出現外邊距疊加的現象。（例如：正常狀況下，div是由上往下排布的，這裏的寫入流是我想的，並不像其餘名詞那麼正規~）

　　這中間讓我好奇的還有IFC，在IFC下又是怎樣的呢？這裏把span都加上10px的margin，行內元素垂直margin無效，不過span1與span2之間距離貌似就怪怪的了，width爲28px。

　　浮動流中呢？下圖全部div皆有10px的margin，在浮動流中，margin也不會摺疊~

　　關於margin collapsing，就補充到這，學無止境啊~~