1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
邊距合并出現(xiàn)的場景
- 元素自身外邊距合并：盒模型包括 外邊距→邊框→內(nèi)邊距→內(nèi)容 逐層包裹的結(jié)構(gòu)，當元素沒有內(nèi)容，內(nèi)邊距，邊框時候，垂直外邊距就會相遇從而合并）。
- 相鄰元素外邊距合并：相鄰元素，上下邊距如果相遇就會產(chǎn)生合并。
- 父元素與子元素外邊距合并：當沒有邊框或者內(nèi)邊距包裹的話，父子元素的垂直邊距就會相遇 從而產(chǎn)生合并，只有普通文檔流的塊級框才會發(fā)生垂直外邊距的合并，行內(nèi)框，浮動框，和絕對定位框不會發(fā)生合并。
如何合并？
- 兩者為正的時候，取更大值
- 一正一負的時候，取相加值
- 兩者為負時，取更小值
如何不讓相鄰元素外邊距合并？
- 讓相鄰元素處于不同的BFC中，形成各自的世界來隔絕相互的影響。
1.png
- 讓相鄰元素嵌套在不同的父容器上，添加內(nèi)邊距或者邊框來隔絕兩者外邊距的合并。
2.png
- 轉(zhuǎn)化為浮動，絕對定位框或者行內(nèi)框（垂直外邊距的合并只對普通文檔流塊級框才有效果）
3.png
2.去除inline-block內(nèi)縫隙有哪幾種常見方法?
- 把元素寫在一行緊挨著，這樣瀏覽器就不會解析空格。
- 使用浮動
- 使用負邊距
3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
使用overfl:auto|hidden 都會形成BFC，從而擁有了自己的領(lǐng)域，而這個領(lǐng)域的高度，浮動元素一樣是參與計算的，所以就撐開了高度。
4.BFC是什么？如何形成BFC，有什么作用?
BFC是什么
BFC(塊級格式化上下文)，即一個獨立的空間或者領(lǐng)域，內(nèi)部元素與外部元素互不干涉
如何形成BFC
根元素（當我們初始在html里輸入內(nèi)容超過屏幕高度時會產(chǎn)生滾動條，符合形成BFC）
overflow（不為visible）
float ( 不為none )
position（fixed或absolute）
display:inline-block|table|table-cell|table-captaion|inline-flex|flex;
(以上都會形成BFC)
ie7及以下版本：*zoom:1;（觸發(fā)haslayout）
有什么作用
BFC可以清除元素浮動外部元素的影響，撐開高度防止高度塌陷，也可以隔絕子元素和父元素的垂直外邊距合并，當然相鄰元素也可以。
5.浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法
浮動導(dǎo)致子元素脫離了正常的文檔流，使父元素無法掌控從而導(dǎo)致高度的塌陷。
解決方法：
- 父容器形成BFC建立自己的領(lǐng)域，從而獲得控制權(quán)，孫悟空即使再牛逼也逃不過五指山
- 清除浮動帶來的影響，可以在父容器內(nèi)添加額外的標簽，然后清除浮動?；蛘呃脗晤?code>:after來清除浮動帶來的影響，方法原理一樣。
本篇文章版權(quán)歸咸魚和饑人谷所有，轉(zhuǎn)載須說明來源
