在什么場景下會出現(xiàn)外邊距合并？如何合并矾兜？如何不讓相鄰元素外邊距合并损趋？給個父子外邊距合并的范例
在什么場景下會出現(xiàn)外邊距合并？
- 相鄰元素：當(dāng)兩個垂直外邊距相遇時椅寺，它們將形成一個外邊距浑槽。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
- 父子元素：當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開）返帕，它們的上和/或下外邊距也會發(fā)生合并桐玻。
- 元素自身上下margin：當(dāng)一個元素內(nèi)部沒有高度和內(nèi)容以及沒有內(nèi)邊距和邊框時，它自身的上下外邊距也會發(fā)生合并荆萤。
如何合并镊靴？
- 全部都為正值，取最大者链韭；
- 不全是正值偏竟，則都取絕對值，然后用正值減去最大值敞峭；
- 沒有正值踊谋，則都取絕對值，然后用0減去最大值旋讹。
如何不讓相鄰元素外邊距合并殖蚕？
- 相鄰的盒模型中轿衔，如果其中的一個是浮動的（floated），垂直margin不會被折疊睦疫，甚至一個浮動的盒模型和它的子元素之間也是這樣害驹。
- 設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被折疊（overflow取值為visible除外）。
- 設(shè)置了絕對定位（position:absolute）的盒模型笼痛，垂直margin不會被折疊裙秋，甚至和他們的子元素之間也是一樣。
- 設(shè)置了display:inline-block的元素缨伊，垂直margin不會被折疊摘刑，甚至和他們的子元素之間也是一樣。
父子外邊距合并范例
父元素的上邊距為20px刻坊，子元素的上邊距為40枷恕，最終合并為父元素上邊距為40px。
去除inline-block內(nèi)縫隙有哪幾種常見方法?
- 去掉html里的空格
- 標(biāo)簽結(jié)束符換行
- 使用負(fù)margin
- 設(shè)置浮動
- 設(shè)置父容器font-size值為0谭胚。（注意這種情況下一定要給子元素單獨設(shè)置font-size）
父容器使用overflow: auto| hidden撐開高度的原理是什么徐块？
- BFC （Block Formatting Context）全稱是塊級格式化上下文，用于對塊級元素排版灾而，默認(rèn)情況下只有根元素（body)一個塊級上下文胡控，但是如果一個塊級元素 設(shè)置了float:left，overflow:auto|hidden或position:absolute樣式旁趟，就會為這個塊級元素生成一個獨立的塊圾上下文昼激，就像在window全局作用域內(nèi)，聲明了一個function就會生成 一個獨立的作用域一樣锡搜，新開僻的BFC像是開僻了一個新的小宇宙橙困，使這個塊圾元素內(nèi)部的排版完全獨立隔絕。
- 獨立的塊級上下文可以包裹浮動流耕餐，全部浮動子元素也不會引起容器高度塌陷凡傅，也就是說包含塊會把浮動元素的高度也計算在內(nèi)，所以不用清除浮動來撐起高度肠缔。
overflow: auto| hidden清除浮動原理
BFC是什么夏跷？如何形成BFC，有什么作用?
BFC：塊級格式化上下文桩砰，它是指一個獨立的塊級渲染區(qū)域拓春，只有Block-level BOX參與，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局亚隅，且與區(qū)域外部無關(guān)硼莽。
如何形成BFC
既然BFC是一塊渲染區(qū)域，那這塊渲染區(qū)域到底在哪，它又是有多大懂鸵，這些由生成BFC的元素決定偏螺，CSS2.1中規(guī)定滿足下列CSS聲明之一的元素便會生成BFC。
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block匆光、table-cell套像、table-caption
- position的值為absolute或fixed
有人說display：table也認(rèn)為可以生成BFC，其實這里的主要原因在于Table會默認(rèn)生成一個匿名的table-cell终息，正是這個匿名的table-ccell生成了BFC夺巩。
有什么作用?
- 要阻止margin重疊。
- 清除浮動
- 多欄布局
參考資料
浮動導(dǎo)致的父容器高度塌陷指什么周崭？為什么會產(chǎn)生柳譬？有幾種解決方法?
浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生续镇？
如果父元素只包含浮動元素美澳，且父元素未設(shè)置高度和寬度的時候。那么它的高度就會塌縮為零摸航。
由于浮動塊不在文檔的普通流中制跟，所以文檔的普通流中的塊表現(xiàn)得就像浮動塊不存在一樣。它不再處于文檔流中酱虎，所以它不占據(jù)空間雨膨，父級容器的高度即不會被撐開，導(dǎo)致高度塌陷的現(xiàn)象读串。
有幾種解決方法哥放？
-
在使用float元素的父元素結(jié)束前加一個高為0寬為0且有clear:both樣式的div
1 -
在使用float元素的父元素添加overflow: auto| hidden;
2 -
使用after偽對象清除浮動
3
以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用爹土？ 和BFC撐開空間有什么區(qū)別？
.clearfix:after{ /*定義一個樣式為clearfix元素的after偽類樣式*/
content: ''; /*內(nèi)容為空*/
display: block; /*表現(xiàn)為塊級元素*/
clear: both;/*消除兩旁浮動*/
}
.clearfix{
*zoom: 1;/*hack寫法踩身。IE6 IE7能識別胀茵。觸發(fā)IE瀏覽器的haslayout，用于解決IE下的浮動問題*/
}
他就是利用:after在元素內(nèi)部插入元素塊挟阻，從而達(dá)到清除浮動的效果琼娘。
和BFC撐開空間有什么區(qū)別？
BFC會形成獨立空間附鸽，讓元素內(nèi)部內(nèi)容與區(qū)域外部無關(guān)脱拼。而上述方法是添加一個父容器能感知到的元素從而讓它被撐開。
本教程版權(quán)歸作者和饑人谷所有坷备，轉(zhuǎn)載須說明來源熄浓！
