在我剛剛學(xué)習(xí)前端的時(shí)候接觸過邊距折疊問題 知道可以觸發(fā)bfc去解決
今天回顧以前寫的文章時(shí)我突然想知道為什么會(huì)產(chǎn)生外邊距折疊 不是指觸發(fā)情況 這個(gè)我知道
就是從瀏覽器的渲染機(jī)制上或者說從原理上來講為什么會(huì)產(chǎn)生邊距折疊

以下是一些概念：
外邊距折疊：指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會(huì)合并成一個(gè)外邊距。
可以通過以下方式阻止：
在父層div加上：overflow:hidden；
把margin-top外邊距改成padding-top內(nèi)邊距;
父元素產(chǎn)生邊距重疊的邊有不為 0 的 padding 或?qū)挾炔粸?0 且 style 不為 none 的 border，父層div加：padding-top: 1px,或者 border-top:1px ;
設(shè)置父元素或子元素浮動(dòng)（left/right）
設(shè)置父元素dispaly:inline-block或者display:table-cell;
給父元素加上絕對(duì)定位
也就是讓它不在滿足外邊距坍塌所需條件或者觸發(fā)BFC來解決外邊距坍塌問題

折疊產(chǎn)生的情況如下：
必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子,并且處于同一個(gè)BFC當(dāng)中。
沒有線盒，沒有空隙，沒有padding和border將他們分隔開(ps :所以解決辦法中有padding或者border兩種辦法)
都屬于垂直方向上相鄰的外邊距