一.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
1.當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并
2.當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并。
如圖示，兩個(gè)div的上外邊距都變成了200px
3.一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并:
注意：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
- 如何合并？
1.兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
2.兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
3.兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。 - 如何不讓相鄰元素外邊距合并？
1.設(shè)置一個(gè)是浮動(dòng)的，垂直margin不會(huì)被折疊
3.設(shè)置絕對(duì)定位（position:absolute），垂直margin不會(huì)被折疊
4.設(shè)置display:inline-block的元素，垂直margin不會(huì)被折疊
5.設(shè)置了overflow屬性的元素和它的子元素之間的margin不會(huì)被折疊（overflow取值為visible除外）
二.去除inline-block內(nèi)縫隙有哪幾種常見(jiàn)方法?
1.去掉標(biāo)簽段之間的空格
如圖，div之間有空隙
去掉標(biāo)簽間的空格后，空隙消失
可以寫(xiě)成一行：
也可以進(jìn)行上下拆分：
2.使用負(fù)邊距
3.使用font-size:0，再設(shè)置單獨(dú)需要的font-size值
4.設(shè)置元素浮動(dòng)
三.父容器使用overflow: auto| hidden撐開(kāi)高度的原理是什么？
overflow: auto| hidden;后，觸發(fā)了BFC，BFC元素里面的子孫元素，不會(huì)影響外部元素的布局，所以高度會(huì)重新計(jì)算。
四.BFC是什么？如何形成BFC，有什么作用?
1.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ì)算
2.哪些元素會(huì)生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
3.作用 -
自適應(yīng)兩欄布局
如圖，浮動(dòng)aslide，但main的左邊依然會(huì)與包含塊的左邊相接觸
如圖，通過(guò)觸發(fā)main生成BFC， 來(lái)實(shí)現(xiàn)自適應(yīng)兩欄布局
-
清除內(nèi)部浮動(dòng)
如圖，父元素不能包含住div
為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)contain生成BFC，那么contain在計(jì)算高度時(shí)，內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算
- 防止垂直 margin 重疊
兩個(gè)div之間的距離為50px，margin重疊了。
在div外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)div便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了。
五.浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法
- 浮動(dòng)元素脫離文檔流，父元素由于沒(méi)有了元素而產(chǎn)生高度塌陷
解決方法：
1、在父容器中加入overflow: hidden/auto;
2、使父容器 float或display:inline-block；
3、在父容器中添加高度；
4、在父容器末尾增加一個(gè)div，用來(lái)清除浮動(dòng) - 使用解決方法有：
1.給父元素添加高度
2.父元素也浮動(dòng)
3.令父元素形成為BFC
4.在父元素末尾增加一個(gè)div，設(shè)置clear：both；來(lái)清除浮動(dòng)
5.使用如下代碼
.clearfix:after{
content: ''; display: block; clear: both;
}
.clearfix{
*zoom: 1;
}
六.以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開(kāi)空間有什么區(qū)別？
原因：在父容器的最后添加一個(gè)內(nèi)容為空的元素，該元素存在于文檔流中并且清除左右浮動(dòng)的元素。父元素雖然感知不到浮動(dòng)元素,但是可以感知本元素,而本元素又必須在浮動(dòng)元素的下方，所以父元素高度就不會(huì)坍塌
與BFC區(qū)別：BFC使父容器本身形成一個(gè)可以包含浮動(dòng)元素的獨(dú)立的空間，上述方法只是撐開(kāi)了內(nèi)容，并沒(méi)有形成獨(dú)立的空間
