在什么場景下會出現外邊距合并？如何合并暇矫？如何不讓相鄰元素外邊距合并主之？給個父子外邊距合并的范例
在普通文檔流中，有兩個塊級元素相鄰（可以是兄弟元素李根，也可以是父子元素）且沒有邊界線（padding或者border）槽奕，他們的外邊距就會出現外邊距合并。
合并的結果是：
- 兩個相鄰的外邊距都是正數時房轿，折疊結果是它們兩者之間較大的值粤攒。
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值囱持。
- 兩個外邊距一正一負時夯接，折疊結果是兩者的相加的和。
注意纷妆，如果一個塊級元素沒有設置border和padding盔几，只有外邊距的話，他自身的上下外邊距也是會合并的
不讓相鄰的外邊距合并的條件：
需要在兩個外距之間加一條邊界線：
這條邊界線可以使padding掩幢，也可以是border逊拍、可以是BFC形成兩個獨立空間讓兩個相鄰元素分開主要目的是為了讓相鄰的外邊距互相不能夠接觸上鞠，這樣就避免產生外邊距合并。設置其中一個元素為浮動元素或者絕對定位芯丧，此元素脫離文檔流后不會與任何元素外邊距合并芍阎。
為其中一個元素加入inline-block,此元素不會與任何元素外邊距合并。
父子外邊距合并范例：
我是范例
去除inline-block 內縫隙有哪幾種常見方法?
假設linline-block的對象為元素li：
- 不讓li標簽換行缨恒，或者li標簽的閉合標簽>放在第二行谴咸，這種思路是清除li元素之間的空格縫隙達到無縫對接
- 設置
margin-left：-4px；這個值相對固定骗露，但帶來的問題是第一個li標簽會溢出岭佳。可單獨為第一個設置margin-left:0 - 為li元素設置浮動椒袍。但帶來的 問題是父元素無法被撐開驼唱，要為父元素設置
overflow: auto; - li元素設置inline-block；為他的父元素設置
font-size: 0;同時為li元素里設置font-size（字體大芯允睢）
父容器使用overflow: auto| hidden撐開高度的原理是什么？
overflow: auto| hidden會讓元素成為一個BFC辨赐，形成一個獨立的空間优俘，空間內的排版完全獨立，而這個空間里能夠包裹浮動流掀序，所以就能被浮動元素撐起高度帆焕。
BFC是什么？如何形成BFC不恭，有什么作用?
BFC是一個獨立的布局環(huán)境叶雹，環(huán)境里的任何元素不會受到外界的影響。
要使一個元素形成BFC可以為元素添加：
display: inline-block;overflow: auto| hidden- 添加浮動
-
position:fixed|absolute絕對定位
bfc可以形成一個獨立的不受外界干擾的布局换吧，內容按照普通文檔流進行排列折晦，我們一般用他來消除浮動元素帶來的負面影響。
浮動導致的父容器高度塌陷指什么沾瓦？為什么會產生满着？有幾種解決方法
浮動導致的父容器高度塌陷是指在父容器元素內如果內容都是浮動元素，而父元素沒有規(guī)定高度贯莺，則父元素會縮為零不會被撐開风喇。
因為浮動元素都是脫離了文檔流，父容器會認為里面沒有內容所以會產生這樣的問題缕探。
解決的辦法有：
- 為父容器添加浮動魂莫，父容器的高度就會撐到包含所有浮動元素為止，缺點是會影響到兄弟元素爹耗，解決辦法是為受影響的元素添加
clear:both - 為父容器添加
overflow:hidden|auto耙考；會撐開父容器高度直到包含所有浮動元素谜喊。 - 為父元素添加子元素空的div塊，并對此元素設置
clear: both;但是不推薦這樣做琳骡，影響代碼語義化 - 為父元素設置絕對定位
- 為父元素添加偽類：
.clearrix:after {
content: " ";
display: block;
clear: both;
}
以下代碼每一行的作用是什么锅论？ 為什么會產生作用？ 和BFC撐開空間有什么區(qū)別楣号？
.clearfix:after{ /* 定義偽類最易，選擇在clearfix的元素后面插入一個元素 */
content: ''; /* 元素內容為空，是行內元素 */
display: block; /* 將元素變?yōu)閴K級元素 */
clear: both; /* 清楚塊級元素浮動 */
}
.clearfix{ /* 選擇clearfix元素 */
*zoom: 1; /* 兼容IE6炫狱，清除浮動 */
}
