1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的例子。

在CSS中，兩個或多個毗鄰（父子元素或兄弟元素）的普通流中的塊元素垂直方向上的 margin 會發(fā)生疊加。
這種方式形成的外邊距即可稱為外邊距疊加(collapsed margin)。
何為毗鄰：是指沒有被非空內(nèi)容、padding、border 或 clear 分隔開。
何為普通流：除浮動（ float ）、絕對定位（ absolute ）外的代碼即為普通流。

• 兄弟關(guān)系：

  
  
  QQ截圖20160828134158.png

1，2margin設(shè)置20px, 3設(shè)置40px；
如圖發(fā)生合并，1，2之間仍為20，2，3之間為40；
可得出結(jié)論

• 兩個相鄰兄弟元素之間margin發(fā)生合并，兩者距離以較大的值為準(zhǔn)

可通過建立BFC來取消外邊距合并；

• 父子關(guān)系：
  如圖發(fā)生合并，父子元素之間外邊距為40，父元素margin為40，子元素為20margin

  
  
  QQ截圖20160828135320.png

可以給父元素添加邊框，內(nèi)邊距或內(nèi)容當(dāng)做分界線，也可以讓父元素形成bfc，這樣就不會發(fā)生邊距合并。

• 空元素（自身外邊距合并）

添加邊框后不合并

自身外邊距合并

可以給這個元素添加添加邊框，內(nèi)邊距，或者設(shè)置overflow：auto形成bfc。

• 創(chuàng)建BFC可使得兩者不合并
• 通過對父元素建立border，padding，或者間隔可以使外邊距不合并
• 浮動元素不合并
• 絕對定位元素不合同
• 根元素不合并
  總結(jié)：不僅僅相鄰元素外邊距會合并，有時候不相鄰的元素外邊距也可能合并，兩個元素外邊距會不會合并主要看它們外邊距之間有沒有分界線存在。所以不讓兩個元素的外邊距合并，就要讓它們之間有道分界線，這個分界線可以是border，padding或是bfc形成的獨立空間。

2.去除inline-block（IE8以上兼容）內(nèi)縫隙有哪幾種常見方法?

• 通過消除元素之間代碼的換行的間隙，可以出處內(nèi)縫隙；

  
  
  讓換行元素的標(biāo)簽括號相連

使元素處于一行

• 可以使用負margin來控制間隙，一般可設(shè)置-4px即可，但注意調(diào)整第一格元素的樣式；
• 可以使用浮動來清除，同時記得需對父元素做清除浮動處理，避免產(chǎn)生影響；
• 對父元素使用font-size:0;也可以清除空隙；但子元素必須重新再設(shè)定字體大?。?/li>

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

可以使得父容器形成BFC，并觸發(fā)BFC。
因為在BFC中，形成一個獨立的空間，內(nèi)在元素自行按照規(guī)則排列，不受外界影響也不干擾外界。
而根據(jù)規(guī)則浮動元素的高度也計算在BFC容器當(dāng)中，所以高度被撐開了。
也可以理解為元素邊界要與border左邊界接觸，所以高度被撐開了。

QQ截圖20160828125903.png

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

• BFC的定義：是指浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。

當(dāng)一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生Block Formatting Context：

• float的值不為”none”
• overflow的值不為”visible”
• display的值為 “table-cell”, “table-caption”, or “inline-block”中的任何一個
• position的值不為 “static” 或 “relative”中的任何一個

BFC布局規(guī)則：

• 內(nèi)部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
• 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即 使存在浮動也是如此。
• BFC的區(qū)域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算。

使用舉例
-1. 利用BFC可以消除Margin Collapse

QQ截圖20160828093512.png

• 2.用于布局

QQ截圖20160828095841.png

• 3.可以包含浮動元素，解決容器高度塌陷；

QQ截圖20160828125903.png

參考資料：
Block-level boxes、containing block、block formatting context 三者之間的區(qū)別和聯(lián)系

5.浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法

浮動導(dǎo)致父容器塌陷，是因為浮動元素是脫離文檔流的，此時父容器里面相當(dāng)于沒有元素一樣，從而導(dǎo)致高度塌陷；
如果要解決問題即是要解決浮動帶來的影響，即是要清楚浮動

• 可以創(chuàng)建BFC來解決
• 可以在父容器添加元素，設(shè)置清除浮動；
• 可以使用偽類元素，添加一個內(nèi)容為空的元素，設(shè)置清楚浮動

6.以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？

.clearfix:after{    /*  選擇clearfix創(chuàng)建一個after偽類 */  
  content: '';         /*   內(nèi)容為空 */
  display: block;   /*  呈現(xiàn)塊級元素*/
  clear: both;       /*   清楚元素兩邊浮動*/
}
.clearfix{           /*   選擇class為 clearfix 的元素 */
  *zoom: 1;       /*IE8以下使用該方法觸發(fā)IE瀏覽器的haslayout ，解決ie下的浮動，margin重疊等問題。 */
}

這種方法是創(chuàng)建一個空的塊級元素，清楚浮動后，元素會排在浮動元素的下一行中出現(xiàn)，這樣就撐起了父容器高度。
而BFC是形成了一個新的獨立空間。

文章版權(quán)歸本文作者以及饑人谷所有。