最近做項(xiàng)目遇到了外邊距折疊的問題慌核，做技術(shù)當(dāng)然要知其然疆拘，知其所以然。
外邊距折疊(margin-collapsing)箫踩，又叫外邊距合并。它是指塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并成一個(gè)外邊距谭贪，其大小取其中最大的一個(gè)
為啥需要外邊距折疊呢在CSS1.0的文檔里就有了說明：
外邊距用來指定非浮動(dòng)元素與其周圍盒子邊緣的最小距離境钟。兩個(gè)或兩個(gè)以上的相鄰的垂直外邊距會(huì)被折疊并使用它們之間最大的那個(gè)外邊距值。多數(shù)情況下俭识，折疊垂直外邊距可以在視覺上顯得更美觀慨削，也更貼近設(shè)計(jì)師的預(yù)期。
那么具體什么情況下會(huì)發(fā)生外邊距折疊的情況呢
1.兄弟元素之間
如果兩個(gè)相鄰元素的上下外邊距相遇套媚，那么會(huì)產(chǎn)生外邊距折疊缚态。
2.父元素與它的第一個(gè)元素或者最后一個(gè)元素之間
父元素與它的子元素之間隔著內(nèi)邊距、邊框堤瘤、內(nèi)容玫芦。如果這些沒有了，那么父元素和子元素的外邊距相鄰本辐，就會(huì)發(fā)生外邊距折疊桥帆。
3.空的塊級(jí)元素
盒模型是內(nèi)容-->內(nèi)邊距-->邊框-->外邊距医增，如果內(nèi)容沒了，那么margin-top和margin-bottom就相遇了老虫，自然就會(huì)產(chǎn)生外邊距折疊嘍叶骨。
一言以蔽之，不能讓兩個(gè)margin相遇张遭，否則就會(huì)發(fā)生外邊距折疊邓萨。
那么我們?nèi)绾蝸肀苊馔膺吘嗾郫B呢
1.浮動(dòng)元素不會(huì)與任何元素發(fā)生疊加，也包括它的子元素
2.絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加菊卷，也包括它的子元素
3.inline-block 元素和其他任何元素之間不發(fā)生外邊距疊加缔恳，也包括它的子元素
4.創(chuàng)建了 BFC 的元素不會(huì)和它的子元素發(fā)生外邊距疊加 (兄弟元素還是會(huì)疊加的哦)
