一卵凑、在什么場景下會出現(xiàn)外邊距合并庆聘？如何合并？如何不讓相鄰元素外邊距合并勺卢？給個父子外邊距合并的范例
1伙判、外邊距和并的含義①②③④⑤⑥
①外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時黑忱，它們將形成一個外邊距宴抚。
②合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
注意：
①只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并甫煞。
②行內(nèi)框菇曲、浮動框、絕對定位之間的外邊距不會合并抚吠。
2常潮、外邊距合并主要有三種情況：
①相鄰兄弟元素之間外邊距合并
②父子元素的外邊距合并(如果父元素沒有設(shè)置border，padding楷力、沒有內(nèi)容)
③自身的外邊距合并(自己沒有內(nèi)容喊式，沒有border和padding)
3、外邊距合并的方式：
① 當(dāng)兩個外邊距都是正數(shù)時萧朝，取兩者之中的較大者
②當(dāng)兩個外邊距都是負(fù)數(shù)時岔留，取兩者之間絕對值較大者
③當(dāng)兩個外邊距一正一負(fù)時，取的是兩者的和
4剪勿、舉例說明：
①父子關(guān)系的合并
Paste_Image.png
Paste_Image.png
父元素的外邊距和子元素的外邊距合并為40px贸诚，并不是它們的外邊距之和。
如何去除父子關(guān)系外邊距合并?
根據(jù)盒模型的原理厕吉，父子關(guān)系的外邊距合并是因為它們之間沒有分界線酱固。可以給父元素添加邊框头朱、內(nèi)邊距运悲、內(nèi)容當(dāng)做分界線和讓父元素形成bfc，這樣就不會發(fā)生邊距合并项钮。
②相鄰兄弟關(guān)系的合并
設(shè)置浮動班眯，display：inline-block或使其父元素均形成BFC可防止邊距合并（如overflow:hidden）
③自身外邊距合并希停；
假設(shè)有一個空元素，它有外邊距署隘，但是沒有邊框或填充宠能。在這種情況下，上外邊距與下外邊距就碰到了一起磁餐，它們會發(fā)生合并：
Paste_Image.png
如果這個外邊距遇到另一個元素的外邊距违崇，它還會發(fā)生合并：
Paste_Image.png
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起诊霹，形成了一個小的外邊距羞延。
Paste_Image.png
如何去除自身外邊距的合并
可以給這個元素添加添加邊框、內(nèi)邊距脾还、設(shè)置overflow：auto形成bfc伴箩。
5、不產(chǎn)生外邊距合并的情況
①浮動元素不與任何元素產(chǎn)生外邊距合并
Paste_Image.png
②父子關(guān)系鄙漏、兄弟關(guān)系嗤谚，設(shè)置inline-block元素不合并
Paste_Image.png
③創(chuàng)建BFC與子元素不合并
子元素設(shè)置overflow: hidden;也可以形成BFC，但是沒有達到效果怔蚌，外邊距還是會合并呵恢。兩者的外邊距沒有隔離開來。
Paste_Image.png
給子元素添加父元素div媚创，div設(shè)置overflow:hidden渗钉，外邊距不合并
Paste_Image.png
④使用絕對定位的元素，不與任何元素發(fā)生外邊距合并
Paste_Image.png
⑤根元素不合并
總結(jié)：
①不僅僅相鄰元素外邊距會合并钞钙，有時候不相鄰的元素外邊距也可能合并鳄橘。
②兩個元素外邊距會不會合并主要看它們外邊距之間有沒有分界線存在。
③所以不讓兩個元素的外邊距合并芒炼，就要讓它們之間有道分界線瘫怜，這個分界線可以是border，padding本刽、bfc形成的獨立空間鲸湃。
二、去除inline-block內(nèi)縫隙有哪幾種常見方法?
原理:瀏覽器bug將inline-block元素標(biāo)簽之間的縫隙視作文本
Paste_Image.png
1子寓、html內(nèi)標(biāo)簽不含空格
也可以這樣寫暗挑，標(biāo)簽可以換行，但是要保證標(biāo)簽相接的地方?jīng)]有空格
2斜友、使用負(fù)margin
Paste_Image.png
3炸裆、使用浮動
Paste_Image.png
4、使用父元素font-size
Paste_Image.png
注意：父元素設(shè)置font-size為0鲜屏，子元素要重新設(shè)置字體大小烹看。
三国拇、父容器使用overflow: auto| hidden撐開高度的原理是什么？
這樣設(shè)置形成BFC惯殊，BFC是一個獨立的空間酱吝，使其內(nèi)部元素不受外界的影響，因此會撐開父容器的高度土思。
BFC有三個特性：
- BFC會阻止垂直外邊距（margin-top掉瞳、margin-bottom）折疊
- BFC不會重疊浮動元素
- BFC可以包含浮動
根據(jù)第三條特性就可以知道，父容器的高度可以被撐開浪漠。
四、BFC是什么霎褐？如何形成BFC址愿，有什么作用?
**1.BFC是block formatting contexts，塊級格式上下文冻璃。 **
W3C對BFC的定義如下：
浮動元素和絕對定位元素响谓，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子省艳，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）
一個HTML元素要創(chuàng)建BFC娘纷，則滿足下列的任意一個或多個條件即可：
1、float的值不是none跋炕。
2赖晶、position的值不是static或者relative。
3辐烂、display的值是inline-block遏插、table-cell、flex纠修、table-caption或者inline-flex
4胳嘲、overflow的值不是visible
BFC是一個獨立的布局環(huán)境，我們可以理解為一個箱子（實際上是看不見摸不著的）扣草，箱子里面物品的擺放是不受外界的影響的了牛，同時也不影響外界的元素。
BFC就是一個獨立的空間辰妙，內(nèi)部的元素不受外界的影響鹰祸。
2、BFC的布局規(guī)矩：
①內(nèi)部box在垂直方向密浑，一個接一個的放置;
②box的垂直間隙由margin決定福荸，屬于同一個BFC的兩個box間的margin會重疊
③BFC區(qū)域不會與float box重疊（可用于排版）；
④BFC就是頁面上的一個隔離的獨立容器肴掷，容器里面的子元素不會影響到外面的元素敬锐。
⑤計算BFC的高度時背传，浮動元素也參與計算
3、如何創(chuàng)建BFC
①根元素html
②float為 left|right
③overflow為 hidden|auto|scroll
④display為 table-cell|table-caption|inline-block
⑤position為 absolute|fixed
** 4台夺、作用**
- 清除浮動
- 防止外邊距合并
- 設(shè)計布局
五径玖、浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生颤介？有幾種解決方法梳星？
1、子元素設(shè)置浮動后滚朵，就脫離了文檔流冤灾，父元素就感知不到浮動元素的存在，浮動元素會溢出父元素辕近，而父容器就會高度塌陷韵吨。
2、解決父容器塌陷的方法：
①給父級設(shè)置偽類:after移宅，使用clear屬性
②父級overflow：auto,overflow：hidden,float:left,display:inline-block 形成bfc归粉。優(yōu)點是可以很少CSS代碼即可解決浮動產(chǎn)生。如果將父級元素也設(shè)置浮動漏峰，會使其整體浮動糠悼，影響布局，不推薦使用浅乔。
六倔喂、以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用靖苇？ 和BFC撐開空間有什么區(qū)別滴劲？
.clearfix:after{//在父容器上添加類clearfix，使用該類的偽類:after
content: '';//偽元素的內(nèi)容是空的
display: block; //偽元素生成的默認(rèn)為行內(nèi)元素顾复，而clear對象一定是塊級元素,讓該元素成為塊級元素班挖，占據(jù)一整行
clear: both;//清除塊級元素左右的浮動
}
.clearfix{
*zoom: 1;//支持IE瀏覽器,觸發(fā)IE hasLayout 屬性
}
區(qū)別：是BFC形成一個內(nèi)部的獨立空間，內(nèi)部元素的布局不受外部元素的影響芯砸，而上面的方法是通過利用父元素感知塊級元素的存在把自己的空間撐開萧芙，并沒有形成獨立的空間。
