1. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例？
合并場景：
外邊距合并指的是，當兩個垂直邊距相遇時，它們將形成一個外邊距。只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
如何合并：
- 兩個相鄰的外邊距都是正數時，合并取它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，合并取兩者絕對值的較大值。
- 兩個外邊距一正一負時，合并取兩者相加的和。
如何不讓相鄰元素外邊距合并：
- 浮動元素不與任何元素產生外邊距合并
- 創建了新的BFC的元素,給父元素創建了BFC，它的子元素的外邊距不會折疊。
- inline-block 元素不與任何元素產生外邊距合并
- 使用絕對定位的元素，不與任何元素發生外邊距合并
兩個元素外邊距會不會合并主要看它們外邊距之間有沒有分界線存在。要想讓兩個元素的外邊距不合并，就要讓它們之間有道分界線，這個分界線可以是border，padding或者是BFC形成的獨立空間。
父子外邊距合并：
如上圖中，父元素上外邊距是20px,子元素上外邊距是40px,合并之后的上外邊距是40px。
2. 去除inline-block內縫隙有哪幾種常見方法?
inline-block內縫隙
去除inline-block內縫隙的方法：
- 去除HTML內標簽縫隙
- 標簽換行，但是要保證標簽相接的地方沒有空格
- 設置負margin
- 使用浮動
- 將父容器設置font-size=0；此時子容器font-size需重新設置，這個是清除縫隙的最簡單的方式
3. 父容器使用overflow: auto| hidden撐開高度的原理是什么？
overflow的屬性值：
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
BFC的定義：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
BFC的通俗理解：
首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
由此可見，當負容器設置屬性overflow：auto|hidden會創建一個BFC，BFC是一個獨立的空間，使其內部元素不受外界的影響。在這個獨立空間內，塊盒和行盒都會垂直的沿著其父元素的邊框排列，所以高度就被撐開了。
4. BFC是什么？如何形成BFC，有什么作用?
概念：
首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
BFC的形成條件：
- display屬性為：nline-block, table-cell,table-caption；
- overflow屬性（visiable值除外）；
- 絕對定位absolute；
- float屬性（none值除外）
作用：
- 阻止外邊距合并
- 清除浮動或者文字環繞
- 用于布局
5. 浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法？
高度塌陷是指當父元素的height為0時，子元素設置浮動之后，它脫離當前文檔流，所以它也無法撐開其父元素，造成父元素高度塌陷。
解決方法：
- 在父容器里加入height屬性，該方法適用于子元素高度已知并且固定的情況
- 空元素設置clear屬性
- 使用after偽類元素。對浮動元素增加偽類。（IE8以上生效，在IE6、7中可在父容器中增加overflow:auto;或者overflow:hidden等）
- 為父元素創建一個BFC
6. 以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？
<pre>
.clearfix:after{ /在父元素上添加clearfix，使用該類的偽類：after/
content: ''; /偽元素的內容為空/
display: block;/表現為塊狀元素，因為行內元素不會撐開父元素/
clear: both;/清除兩邊浮動/
}
.clearfix{
zoom: 1;/IE專有屬性，兼容IE6-8，參數設置為1的話，多用于清除浮動*/
}
</pre>
和BFC撐開空間的區別：
BFC形成的是一個內部的獨立空間，內部元素的布局不受外部元素的影響，而上面的方法是通過利用父元素感知浮動元素的存在而把空間撐開，并沒有形成獨立的空間。
本文版權歸本人及饑人谷所有，轉載請注明出處
