前言
小問題總是被人視而不見，等遇到的時候又突然想不起來，所以我們需要經常總結，這可以幫助我們更好的記憶東西。今天我們來總結兩個不起眼的小問題：margin塌陷和margin合併
margin塌陷
什麼是margin塌陷
我們先來看個例子，然後引出什麼是margin塌陷
需求：在父子元素中，通過marigin讓父元素相對左邊及頂部各距離100px,也讓子元素相對於父元素左邊和頂部各50px。
代碼如下：
div.father{
width: 200px;
height: 200px;
background-color: rgb(219, 68, 101);
margin-left: 100px;
margin-top: 100px;
}
div.father div.son{
width: 100px;
height: 100px;
background-color: rgb(56, 248, 207);
margin-left: 50px;
margin-top: 50px;
}
複製代碼
代碼看上去沒有什麼問題，看下效果
驚奇的發現，結果出乎我們意料！水平方向的距離確實沒問題，但是垂直方向上，明明子元素設置了margin-top距離頂部50px，按道理它會距離父元素頂部50px纔對。
這種現象被稱之爲margin塌陷。但很多人可能都不太理解，爲什麼叫它塌陷？其實你可以這樣理解，如上述例子，原本子元素要距離父元素頂部50px，現在沒有了，也就是父元素的頂棚對子元素來說沒有作用，相當於沒有，相當於塌陷下來了。所以叫margin塌陷。
一句話總結：父子嵌套的元素垂直方向的margin取最大值。
但是有的時候我們不希望有這樣的問題，那我們如何解決margin塌陷的問題呢？
答案是，我們可以通過觸發BFC來解決！那是什麼是BFC呢？
BFC
什麼是BFC和作用
Block Formatting Context，中文叫塊級格式上下文。
CSS將HTML的每一個元素都當成一個盒子，而且它進一步的認爲每一個盒子裏面都有一套正常的語法規則或者叫渲染規則，它能根據這個規則將寫的HTML元素繪製出來，但是我們可以通過一些特定的手段觸發BFC，讓其所符合的語法規則和原來的語法規則有點不一樣。
也就是觸發BFC之後，特定的盒子會遵循另一套語法規則。
BFC聽起來挺神奇，能改變一個盒子的語法規則，那到底改變了多少呢，其實也沒改變多少。可能千分之一都不到。也就是它只改變了一點點。但是就是這一點點它把解決了margin塌陷和margin合併的問題
如何觸發BFC
小結觸發BFC方法：
-
float屬性爲left/right -
overflow爲hidden/scroll/auto -
position爲absolute/fixed -
display爲inline-block/table-cell/table-caption
有些人會想，有這幾多方式觸發BFC，那用哪種方式好一些？看具體情況，個人認爲一個原則：針對需求，看哪個觸發方式沒有影響就用那個
下面來試試看
解決margin塌陷的問題
如下通過overflow: hidden觸發bfc
div.father{
width: 200px;
height: 200px;
background-color: rgb(219, 68, 101);
margin-left: 100px;
margin-top: 100px;
overflow: hidden;/* 觸發bfc */
}
div.father div.son{
width: 100px;
height: 100px;
background-color: rgb(56, 248, 207);
margin-left: 50px;
margin-top: 50px;
}
複製代碼
結果如下
問題已經解決！
margin合併
什麼是margin合併
還是來看個例子，把兩個兄弟塊元素，一個設置下外邊距100px，一個設置上外邊距100px，讓兩個元素相距200px。
.one{
background-color: pink;
height: 20px;
margin-bottom: 100px;
}
.two{
background-color: purple;
height: 20px;
margin-top: 100px;
}
複製代碼
結果如下
我們發現這兩個元素之間，他們的margin-bottom和margin-top合併了，並且顯示的是較大值。這種現象被稱爲margin合併。解決的方式也是通過觸發bfc來解決
解決margin合併
.one {
background-color: pink;
height: 20px;
margin-bottom: 100px;
}
.wrap{
/* 觸發bfc */
overflow: hidden;
}
.wrap .two {
background-color: purple;
height: 20px;
margin-top: 100px;
}
複製代碼
結果如下：
解決問題！但是一般不這麼解決，爲什麼？
因爲margin合併和margin塌陷不一樣，margin塌陷只添加了CSS，margin合併除了添加CSS，還修改了HTML結構。我們知道一般html結構是不能亂改動的，所以我們通過數學計算來解決這各margin合併的問題。比如上面的例子，我們只要設置前面元素的margin-bottom爲200px或者後面元素的margin-top爲200px即可
以上就是關於margin塌陷和margin合併的小結，如有問題煩請留言告知
來源：LBJ
https://juejin.cn/post/6976272394247897101
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創文章
本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。