1、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
Reference:w3邊距合并解釋
在文檔流中，塊級(jí)元素會(huì)從上往下依次挨著排列，此時(shí)前一個(gè)塊級(jí)元素的margin-bottom會(huì)與后一個(gè)塊級(jí)元素的margin-top合并。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
margin:0;
padding:0;
}
.ct{
border:1px solid
}
.box1{
width:100px;
height:100px;
background:#f00;
margin:20px;
}
.box2{
width:100px;
height:100px;
background:#0f0;
margin:20px
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
</body>
</html>
可以看出，盡管綠盒的margin-top為20px，紅盒的margin-bottom為20px，但此時(shí)中間間隙并非40px,而是合并為20px。若設(shè)置綠盒
margin:10px 20px;;則中間縫隙依舊為20px，故外邊距合并最終留存的結(jié)果是兩者外邊距較大的那一個(gè)。
總結(jié)規(guī)則如下：
<blockquote>
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。
</blockquote>
若要讓外邊距不發(fā)生合并，從根本上來(lái)說(shuō)是需要讓兩個(gè)元素處于不同的BFC中，即讓其中一個(gè)元素處在一個(gè)新的BFC中；
生成BFC的規(guī)則：
<blockquote>
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
</blockquote>
由于float與position:absolute/fixed會(huì)改變文檔流，所以我們一般考慮添加一個(gè)父級(jí)元素，給其添加overflow:hidden/auto;或display:inline-block;來(lái)生成新的BFC。
父子外邊距合并例子
如下圖所示，父子的margin均為20px,顯然父子上下外邊距重合，發(fā)生合并。
消除方法：
- 給父元素增加一個(gè)不為0填充(border,paddding均可);
- 給父級(jí)元素增加
overflow:hidden/auto;。
2、去除inline-block內(nèi)縫隙有哪幾種常見(jiàn)方法?
- 不換行，縫隙出現(xiàn)的本質(zhì)原因是在于換行所出現(xiàn)的一個(gè)空格符號(hào)，所以不換行能夠解決問(wèn)題，但是代碼不規(guī)整；
- 使用浮動(dòng)float：left 父元素需要用overflow：auto或者h(yuǎn)idden撐開(kāi)。
- 給父元素font-size設(shè)為0，需要在自己在inline-block設(shè)置一下字體大小。
3、父容器使用overflow: auto| hidden撐開(kāi)高度的原理是什么？
當(dāng)子元素全部float脫離文檔流之后，父容器可視為內(nèi)部沒(méi)有任何子元素而塌陷，overflow值為auto| hidden時(shí)可以閉合元素修復(fù)高度坍塌，清除浮動(dòng)。
4、BFC是什么？如何形成BFC，有什么作用?
Reference：前端精選文摘：BFC 神奇背后的原理
其實(shí)第一題已經(jīng)詳細(xì)解答了如何形成BFC和BFC的作用，現(xiàn)只列出何為BFC：
BFC 定義
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC布局規(guī)則：
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
5、浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法？
當(dāng)子元素全部float脫離文檔流之后，父容器可視為內(nèi)部沒(méi)有任何子元素而塌陷。
解決方法：
- 給父元素添加
display: inline-block; overflow: auto; 或 overflow: hidden;樣式，使父容器形成BFC空間。 - 使用偽類選擇器after 給父元素最后加上子元素并且具有clear：both屬性，也可以清除浮動(dòng)。
.clearfix:after{ content:''; display:block; clear:both; }
6、以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開(kāi)空間有什么區(qū)別？
.clearfix:after{ content: ''; /*添加一個(gè)空字符*/
display: block; /*變?yōu)閴K級(jí)元素*/
clear: both; /*清除浮動(dòng)*/
}
.clearfix{
*zoom: 1; /*為了兼容IE6\7*/
}
在浮動(dòng)元素后添加一個(gè)沒(méi)有內(nèi)容（實(shí)際上有一個(gè)空字符）的塊級(jí)元素，當(dāng)其清除浮動(dòng)后，所在位置正好是所有浮動(dòng)元素的最下面，自然由其撐起的父級(jí)元素能夠包裹住所有的子元素。
與BFC的區(qū)別：
BFC撐開(kāi)空間是使父元素本身形成一個(gè)獨(dú)立空間來(lái)包容浮動(dòng)元素，而這個(gè)方法是使用內(nèi)容將父容器撐開(kāi)。
