inline-block BFC 邊距合併

在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？

首先，外邊距的合併出如今垂直方向上，兩個塊級元素垂直外邊距相鄰時，二者的原外邊距會合併成一個高度等於二者中較大的新外邊距。

在正常的文檔流下，沒有邊框，沒有padding，但有外邊距時，上下的margin會出現合併，高度等於二者中的較大者。

不讓相鄰元素外邊距合併的方法：

• 加外邊框，加padding；
• 父元素加overflow（不爲visible）;
• 父元素加display:inline-block;
• 父元素加float;

父容器使用overflow: auto| hidden撐開高度的原理是什麼？

overflow：auto|hidden會觸發BFC，因爲BFC能夠包含浮動，故能夠感知浮動元素的高度，因此能夠撐開高度。

BFC是什麼？如何造成BFC，有什麼做用?

BFC（塊級元素格式上下文）造成了一個獨立的空間，空間內部不受外部元素影響。

如何造成BFC：

1.根元素

2.display：inline-block|table-cell|table-caption|flex|inline-flex;

3.position:absolute|fixed;

4.overflow:auto|hidden|scroll;

5.float:right|left|both;

有什麼做用？

1.能夠清除浮動，包含浮動元素；

2.不被浮動元素覆蓋；

3.阻止外邊距摺疊。

浮動致使的父容器高度塌陷指什麼？爲何會產生？有幾種解決方法

因爲浮動脫離文檔流，浮動元素不會影響父元素的寬度，使父元素的高度爲「0」，從而造成高度塌陷。

通常有兩種解決辦法：

1.用clear清除浮動；

2.使父容器造成BFC。 

如下代碼每一行的做用是什麼？ 爲何會產生做用？ 和BFC撐開空間有什麼區別？

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    *zoom: 1;
}

 做用：清除浮動

給類選擇器clearfix的元素添加一個僞類after，添加內容爲空的塊級元素，清除兩邊的浮動。

*zoom用來觸發IE瀏覽器下的hasLayout，解決瀏覽器不兼容問題。

和BFC的區別：

經過僞類清除浮動元素，並非父元素感受到了子元素中的浮動元素，而是在後面添加了一個塊級元素。而元素造成BFC，是由於元素感受到了子元素中浮動元素的寬度，而不是經過添加元素撐開父元素。