在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例。

同一文檔流中的兩個相鄰塊級元素，會出現外邊距合并。

• 上下兩個塊級元素

• 父子元素的外邊距合并。

• 空元素外邊據也會合并。

不讓相鄰元素外距合并。

• border和padding是不讓父子元素外邊距合并。

• 在子元素外面套一個div，變成各自獨立的空間，就可以避免相鄰的元素margin合并，加白色邊框。

去除inline-block內縫隙有哪幾種方法？

• 在html里面將標簽之間的空格去掉。

• 浮動。

• 負margin。

• 直接父元素的font-size設置為0(文本之間沒有空隙)，在子元素上面設置font-size。

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

overflow: auto| hidden是將父容器轉變為一個BFC。在BFC的特性使得其包裹浮動元素。
深入理解CSS溢出overflow

BFC是什么？如何形成BFC，有什么作用?

BFC是獨立的布局環境，BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

形成BFC

• 設置float，值不為”none”
• 設置overflow，值不為”visible”（hidden，auto，scroll）
• 設置display的值為 “table-cell”, “table-caption”,或 “inline-block”
• 設置position，值不為 “static” 或 “relative”（absolute，fixed）

作用：清除浮動，使外邊距不發生合并

浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法?

浮動導致的父容器高度塌陷是指元素設置了浮動屬性后在父級元素內脫離文檔流不再占據文檔流空間，父級元素感知不到已設置浮動的子元素，認為自己內部沒有元素而無法撐開寬高的情況。

浮動導致父容器高度塌陷

• 給父容器最后增加一個空元素，設置clear：both；屬性清除浮動，因為空元素存在于正常文檔流中所以父容器可以感知到這個空元素并且被空元素撐開。

給父容器設置overflow：auto/hidden,float:left/right, display:inline-block/table, position: absolute/fixed,屬性，使父容器形成BFC空間。

以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？

• 以上方法可以在父容器的最后添加一個內容為空存在與文檔流中并且清除左右浮動的元素。父容器將會感知到這個空元素并且把自身空間撐開。
• BFC撐開空間是使父容器本身形成一個可以包含浮動元素的獨立的空間，上述方法只是撐開了內容。