1羡洛、在什么場景下會(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é)果是兩者絕對值的較大值第晰。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和彬祖。
</blockquote>
若要讓外邊距不發(fā)生合并茁瘦，從根本上來說是需要讓兩個(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;來生成新的BFC南蓬。
父子外邊距合并例子
如下圖所示纺非，父子的margin均為20px,顯然父子上下外邊距重合哑了，發(fā)生合并。
消除方法：
- 給父元素增加一個(gè)不為0填充(border,paddding均可);
- 給父級(jí)元素增加
overflow:hidden/auto;烧颖。
2弱左、去除inline-block內(nèi)縫隙有哪幾種常見方法?
- 不換行，縫隙出現(xiàn)的本質(zhì)原因是在于換行所出現(xiàn)的一個(gè)空格符號(hào)炕淮，所以不換行能夠解決問題拆火，但是代碼不規(guī)整；
- 使用浮動(dòng)float：left 父元素需要用overflow：auto或者h(yuǎn)idden撐開涂圆。
- 給父元素font-size設(shè)為0们镜，需要在自己在inline-block設(shè)置一下字體大小。
3润歉、父容器使用overflow: auto| hidden撐開高度的原理是什么模狭？
當(dāng)子元素全部float脫離文檔流之后，父容器可視為內(nè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的左邊相接觸(對于從左往右的格式化零如，否則相反)。即使存在浮動(dòng)也是如此锄弱。
BFC的區(qū)域不會(huì)與float box重疊考蕾。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素会宪。反之也如此肖卧。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算掸鹅。
5塞帐、浮動(dòng)導(dǎo)致的父容器高度塌陷指什么拦赠？為什么會(huì)產(chǎn)生？有幾種解決方法葵姥？
當(dāng)子元素全部float脫離文檔流之后荷鼠，父容器可視為內(nè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撐開空間有什么區(qū)別鳞陨？
.clearfix:after{ content: ''; /*添加一個(gè)空字符*/
display: block; /*變?yōu)閴K級(jí)元素*/
clear: both; /*清除浮動(dòng)*/
}
.clearfix{
*zoom: 1; /*為了兼容IE6\7*/
}
在浮動(dòng)元素后添加一個(gè)沒有內(nèi)容（實(shí)際上有一個(gè)空字符）的塊級(jí)元素，當(dāng)其清除浮動(dòng)后瞻惋，所在位置正好是所有浮動(dòng)元素的最下面炊邦，自然由其撐起的父級(jí)元素能夠包裹住所有的子元素。
與BFC的區(qū)別：
BFC撐開空間是使父元素本身形成一個(gè)獨(dú)立空間來包容浮動(dòng)元素熟史，而這個(gè)方法是使用內(nèi)容將父容器撐開。
