在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

在什么場景下會出現(xiàn)外邊距合并？

• 相鄰元素：當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
• 父子元素：當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。
• 元素自身上下margin：當(dāng)一個元素內(nèi)部沒有高度和內(nèi)容以及沒有內(nèi)邊距和邊框時，它自身的上下外邊距也會發(fā)生合并。

如何合并？

• 全部都為正值，取最大者；
• 不全是正值，則都取絕對值，然后用正值減去最大值；
• 沒有正值，則都取絕對值，然后用0減去最大值。

如何不讓相鄰元素外邊距合并？

1. 相鄰的盒模型中，如果其中的一個是浮動的（floated），垂直margin不會被折疊，甚至一個浮動的盒模型和它的子元素之間也是這樣。
2. 設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被折疊（overflow取值為visible除外）。
3. 設(shè)置了絕對定位（position:absolute）的盒模型，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣。
4. 設(shè)置了display:inline-block的元素，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣。

父子外邊距合并范例

父子外邊距合并

去除inline-block內(nèi)縫隙有哪幾種常見方法?

• 去掉html里的空格

1

• 標(biāo)簽結(jié)束符換行

2

• 使用負(fù)margin

3

• 設(shè)置浮動

4

• 設(shè)置父容器font-size值為0。（注意這種情況下一定要給子元素單獨(dú)設(shè)置font-size）

5

父容器使用overflow: auto| hidden撐開高度的原理是什么？

1. BFC （Block Formatting Context）全稱是塊級格式化上下文，用于對塊級元素排版，默認(rèn)情況下只有根元素（body)一個塊級上下文，但是如果一個塊級元素 設(shè)置了float:left，overflow:auto|hidden或position:absolute樣式，就會為這個塊級元素生成一個獨(dú)立的塊圾上下文，就像在window全局作用域內(nèi)，聲明了一個function就會生成 一個獨(dú)立的作用域一樣，新開僻的BFC像是開僻了一個新的小宇宙，使這個塊圾元素內(nèi)部的排版完全獨(dú)立隔絕。
2. 獨(dú)立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內(nèi)，所以不用清除浮動來撐起高度。
   overflow: auto| hidden清除浮動原理

BFC是什么？如何形成BFC，有什么作用?

BFC：塊級格式化上下文，它是指一個獨(dú)立的塊級渲染區(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，其實(shí)這里的主要原因在于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)象。

有幾種解決方法？

1. 在使用float元素的父元素結(jié)束前加一個高為0寬為0且有clear:both樣式的div

   
   
   1

2. 在使用float元素的父元素添加overflow: auto| hidden;

   
   
   2

3. 使用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會形成獨(dú)立空間，讓元素內(nèi)部內(nèi)容與區(qū)域外部無關(guān)。而上述方法是添加一個父容器能感知到的元素從而讓它被撐開。

本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！