一丶什么是margin塌陷
在標(biāo)準(zhǔn)文檔流中，豎直方向的margin會(huì)出現(xiàn)疊加現(xiàn)象（水平方向不會(huì)塌陷）贯吓，兩個(gè)margin緊挨著，中間沒有border或者padding
margin直接接觸蜀变，就產(chǎn)生了合并悄谐。表現(xiàn)為較大的margin會(huì)覆蓋掉較小的margin，豎直方向的兩個(gè)盒子中間只有一個(gè)較大的margin库北，這就是margin塌陷現(xiàn)象爬舰。直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 300px;
height: 300px;
background-color: #56b829;
margin-top: 100px;
margin-left: 150px;
}
.b{
width: 100px;
height: 100px;
background-color: #330099;
margin-top: 200px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
</div>
</div>
</body>
</html>
從上圖中我們可以看到，水平方向的margin確實(shí)是不受影響寒瓦，但是情屹，b元素的margin-top屬性并沒有起作用，而且“傳遞“給了其父元素杂腰。
如何解決這種問題屁商，下面有幾種方法：
1.給父元素a添加border屬性
例如：border: 1px solid blue
2.給父元素a添加padding屬性
例如：padding: 1px
3.使父元素a成為一個(gè)BFC
二丶什么是BFC
上面我們說了，要解決margin塌陷問題，我們可以讓父元素a成為一個(gè)BFC蜡镶，那么什么是BFC？
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"恤筛。它是一個(gè)獨(dú)立的渲染區(qū)域官还，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局毒坛，并且與這個(gè)區(qū)域外部毫不相干望伦。
BFC布局規(guī)則：
1.內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置煎殷。
2.Box垂直方向的距離由margin決定屯伞。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊（接下來要講的margin合并）
3.每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化豪直，否則相反)劣摇。即使存在浮動(dòng)也是如此。
4.BFC的區(qū)域不會(huì)與float box重疊弓乙。
5.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器末融，容器里面的子元素不會(huì)影響到外面的元素。反之也如此暇韧。
6.計(jì)算BFC的高度時(shí)勾习，浮動(dòng)元素也參與計(jì)算（在bfc中浮動(dòng)元素可以撐起盒子高度）
如何使得一個(gè)元素成為BFC？
1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible
三丶margin合并
原理:兩個(gè)兄弟結(jié)構(gòu)的元素在垂直方向上的margin是合并的
簡單地說懈玻，外邊距合并指的是巧婶，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距涂乌。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者艺栈。
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并骂倘。請(qǐng)看下圖
如何解決這個(gè)問題眼滤？
在任意一個(gè)元素外套一個(gè)div，并使其成為bfc
但在開發(fā)中這是很不常用的历涝，因?yàn)檫@樣做改變了DOM結(jié)構(gòu)诅需，所以在實(shí)際應(yīng)用時(shí),在margin合并這個(gè)問題上,我們一般不用bfc,而是通過只設(shè)置上面的元素的margin-bottom來解決距離的問題。
