1、在什么場景下會出現(xiàn)外邊距合并勾拉？如何合并管毙？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并
外邊距合并（疊加）是一個相當(dāng)簡單的概念斋陪。但是，在實(shí)踐中對網(wǎng)頁進(jìn)行布局時，它會造成許多混淆。簡單地說惠赫，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時故黑，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者庭砍。當(dāng)一個元素出現(xiàn)在另一個元素上面時场晶，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：
CSS 外邊距合并實(shí)例 1
當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開）怠缸，它們的上和/或下外邊距也會發(fā)生合并诗轻。請看下圖：
CSS 外邊距合并實(shí)例 2
盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并揭北。假設(shè)有一個空元素扳炬，它有外邊距，但是沒有邊框或填充搔体。在這種情況下恨樟，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：
CSS 外邊距合并實(shí)例 3
如果這個外邊距遇到另一個元素的外邊距疚俱，它還會發(fā)生合并：
CSS 外邊距合并實(shí)例 4
這就是一系列的段落元素占用空間非常小的原因劝术，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€小的外邊距。外邊距合并初看上去可能有點(diǎn)奇怪养晋，但是實(shí)際上衬吆，它是有意義的。以由幾個段落組成的典型文本頁面為例绳泉。第一個段落上面的空間等于段落的上外邊距逊抡。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和零酪。這意味著段落之間的空間是頁面頂部的兩倍冒嫡。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起蛾娶，這樣各處的距離就一致了灯谣。
如何不讓相鄰元素外邊距合并
相鄰的盒模型中，如果其中的一個是浮動的（floated）蛔琅，垂直margin不會被折疊胎许，甚至一個浮動的盒模型和它的子元素之間也是這樣。
設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被折疊（overflow取值為visible除外）罗售。
設(shè)置了絕對定位（position:absolute）的盒模型辜窑，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣寨躁。
設(shè)置了display:inline-block的元素穆碎，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣职恳。
根元素的垂直margin不會被折疊
范例
2所禀、去除inline-block內(nèi)縫隙有哪幾種常見方法?
有縫隙
方法一:標(biāo)簽無空格
方法二:負(fù)margin
方法三:浮動
方法四:利用父元素設(shè)置font-size:0;然后再給子元素把font-size設(shè)置回來
3、父容器使用overflow: auto| hidden撐開高度的原理是什么放钦？
overflow: auto| hidden會觸發(fā)BFC屬性色徘，BFC為它的內(nèi)容開辟了新的擺放空間，這個擺放空間是相對獨(dú)立的操禀，它會把浮動元素的高度也計(jì)算在內(nèi)褂策，所以高度就撐開了。
4颓屑、BFC是什么斤寂？如何形成BFC，有什么作用?
BFC的概念：浮動元素和絕對定位元素揪惦，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）遍搞，以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）丹擎。在BFC中尾抑，盒子從頂端開始垂直地一個接一個地排列歇父，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中再愈，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊榜苫。首先BFC是一個名詞，是一個獨(dú)立的布局環(huán)境翎冲，我們可以理解為一個箱子（實(shí)際上是看不見摸不著的）垂睬，箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響抗悍。）如何形成BFC：
用float屬性（none值除外）驹饺；
用絕對定位absolute；
overflow（visible值除外）缴渊；
display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex
作用
撐開父元素
阻止外邊距合并
清除浮動的文字環(huán)繞影響或位置影響
5赏壹、浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生衔沼？有幾種解決方法
高度塌陷是指蝌借，子元素設(shè)置浮動后，就脫離了文檔流指蚁，父元素就感知不到浮動元素的存在菩佑，浮動元素會溢出父元素，而父容器就會高度塌陷凝化。
空元素設(shè)置clear屬性
使用css偽類::after
為其父元素創(chuàng)建一個BFC稍坯。
6、以下代碼每一行的作用是什么搓劫？ 為什么會產(chǎn)生作用瞧哟？ 和BFC撐開空間有什么區(qū)別？
.clearfix:after{ content: ''; /與偽類元素配合使用枪向，內(nèi)容為空/
display: block; /表現(xiàn)為塊級元素绢涡，如果不表現(xiàn)，行內(nèi)元素不會撐開父元素/ clear: both;/清除兩邊浮動/
}
.clearfix{ zoom: 1;/IE專有屬性遣疯，縮放比例，也可用于檢查BUG凿傅，參數(shù)設(shè)為1的話缠犀，多用于清除浮動/}
區(qū)別：BFC是形成一個內(nèi)部的獨(dú)立小空間，不受外部元素影響聪舒。而上述方法只是讓父元素感知到浮動元素的存在辨液，把內(nèi)容撐開，不會形成獨(dú)立的空間箱残。
