一、在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 當兩個垂直的元素外邊距相遇時，就會形成一個外邊距，這個就是外邊距合并現象。
- 相鄰元素和父子元素之間都會出現外邊距合并的現象。
- 當兩個合并的外邊距都是正數時，合并后外邊距取值最大數。
- 當兩個合并的外邊距都是負數時，合并后外邊距取值絕對值最大數。
- 當兩個合并的外邊距一正一負時，合并后外邊距取值兩者的和。
示例
3.如圖示案例中，父元素（黃色區域）中的子元素（紅色和綠色區域）分別設置了外邊距，但是子元素和父元素之間沒有上外邊距，這就是父子外邊距合并現象。
示例
二、去除inline-block內縫隙有哪幾種常見方法?
1.標簽寫在一行不換行或者在標簽相連接的地方換行。
示例
2.設置元素浮動。
示例
3.重新設置父元素和子元素的字體大小。
示例
4.利于負margin（margin:-4px）。
示例
三、父容器使用overflow: auto|hidden撐開高度的原理是什么？
1.overflow:auto和overflow:hidden會使父容器形成新的BFC，新的BFC是一個獨立的布局環境，可以清除浮動帶來的影響，所以浮動清除后，父容器自然就被撐開了。
四、BFC是什么？如何形成BFC，有什么作用?
1.BFC是什么：
- 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如：inline-blocks，table-cells和table-captions），以及overflow值不為"visiable"的塊級盒子，都會為他們的內容創建新的 BFC（塊級格式上下文）。
- 在BFC中，盒子從頂端開始垂直的一個接一個地排列，兩個盒子之間的垂直間隙是由他們的margin值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
- 在BFC中。每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）（對于從右到左的格式來說，則觸碰到右邊緣）。
2.BFC的通俗理解：
- 首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒和行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
3.如何形成BFC
- 使用浮動：float:right或者float:left。
- 使用絕對定位：position:absolute或者position:fixed。
- 使用overflow:hidden或者overflow:auto;
- 使用display屬性：display值為table-cell, table-caption, inline-block, flex, 或者inline-flex。
4.BFC作用：
- 清除浮動的影響，撐開父容器，便于布局；
- 防止外邊距合并的現象發生。
如下圖所示，在兩個div中分別加上父容器，然后在父容器中設置overflow:auto，使父容器形成BFC，這樣就可以防止元素外邊距合并了。
防止外邊距合并案例
五、浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法？
1.父容器高度塌陷是指當父容器的高度height設置為0時，父容器內部的元素設置浮動后，浮動后的元素脫離文檔流，父容器內沒有元素支持，高度變為0。
2.解決方法：
- 清除元素內部浮動帶來的影響；
如圖所示，運用兩種常見的方法清除子元素浮動，即可撐開父元素的高度。
示例
- 讓父元素形成BFC；
如圖所示，可以使用幾種方法讓父元素形成BFC，清除浮動的影響，撐開父容器。
示例
六、以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？
代碼
作用，區別
