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

一 、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系或者沒有內(nèi)容的元素本身）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為合并，并且因而所結(jié)合成的外邊距稱為合并外邊距。。
當(dāng)兩個(gè)外邊距都是正數(shù)時(shí)，取兩者之中的較大者；當(dāng)兩個(gè)外邊距都是負(fù)數(shù)時(shí)，取兩者之間絕對(duì)值較大者；當(dāng)兩個(gè)外邊距一正一負(fù)時(shí)，取的是兩者的和。
示例如下：
正常文檔流中兩個(gè)相鄰兄弟之間的外邊距合并（如圖取最大值30px）

30px.png

解決辦法：
設(shè)置display:inline-block;

display-inlineblock.png

float.png

給子元素加了div包裹之后，利用overflow:hidden／auto形成bfc
外邊距不合并。

加包裹 bfc.png

父子關(guān)系外邊距合并

父子關(guān)系的合并.png

父子外邊距合并解決辦法：
給父元素加邊框或者padding(類似在兩者的外邊距加一個(gè)分界)

解決辦法.png

參考
參考

自身的合并

一個(gè)元素如果里面沒有東西，也沒有邊框和padding，那么它自身的外邊距就會(huì)融合，也會(huì)發(fā)生外邊距合并。

自身去除合并.png

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

![ 橫排無縫隙_580891.png]

橫排無縫隙.png

錯(cuò)排無縫隙.png

父級(jí)字體設(shè)置為零.png

這里需要注意的一點(diǎn)是在父元素里面設(shè)置了font-size之后，在容器里面的子元素需要把字體大小重置回來。

設(shè)置負(fù)margin.png

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

overflow: auto| hidden形成了一個(gè)新的BFC,這個(gè)新的BFC是一個(gè)獨(dú)立的布局環(huán)境,不受外界影響,也不會(huì)影響外界

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

BFC全稱為block formatting context，翻譯過來就是塊級(jí)格式化上下文，是頁面 CSS 視覺渲染的一部分。它是用于決定塊盒子的布局及浮動(dòng)相互影響的一個(gè)區(qū)域。（簡(jiǎn)單理解就是它是一個(gè)獨(dú)立封閉的盒子，它對(duì)外面的元素不產(chǎn)生影響，但里面的元素還是會(huì)相互影響的，除非在這里面又產(chǎn)生了一個(gè)BFC）.
BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境.BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來的影響。）并且在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
以下情況都可以形成BFC：

float為 left|right（不為none）
overflow為 hidden|auto|scroll (不為visible)
display為 table-cell|table-caption|inline-block|inline-flex
position為 absolute|fixed (不為relative和static)

BFC主要有以下一些用處：
清除浮動(dòng)
防止外邊距合并
設(shè)計(jì)布局

五 、浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法？

是指父容器撐不開空間（浮動(dòng)元素包含在里面），原因?yàn)楦?dòng)元素是脫離文檔流的，父元素感知不到浮動(dòng)元素的高度，此時(shí)父容器里面相當(dāng)于沒有元素一樣，從而導(dǎo)致高度塌陷；
解決父容器塌陷的方法就是要清除浮動(dòng) (10)

六 、以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？

/*設(shè)置clear類的after偽類,即在clear類所在元素的結(jié)尾 
增加一個(gè)虛擬的子元素,該子元素具有{}中的屬性*/
clearfix:after{
 /*在clearfix后面增加元素*/ 
content: '' ";
 /*該元素內(nèi)容為空*/ 
display: block;  /*顯示為塊級(jí)元素,這樣可以保證該元素在
浮動(dòng)元素的下方,確保清除浮動(dòng)起作用
 即:父元素感知不到浮動(dòng)元素,但是可以感知本元素,
而本元素又必須在浮動(dòng)元素的下方,所以父元素高度就不會(huì)坍塌*/
clear: both;  
/*清除兩側(cè)浮動(dòng)*/
}

.clearfix{  /*IE8以下沒有偽類,用以下方式清除*/ 
*zoom: 1; /*只針對(duì)IE8以下，
觸發(fā)IE瀏覽器的haslayout ，解決ie下的浮動(dòng)，margin重疊等問題。 */}

*zoom: 1; 這個(gè)屬性是IE專有屬性，其他瀏覽器沒有，它可以設(shè)置或檢索對(duì)象的縮放比，它還有其他一些小作用，比如觸發(fā)ie的hasLayout屬性，清除浮動(dòng)、清除margin的重疊等?，F(xiàn)在已經(jīng)基本不用這個(gè)屬性，所以僅在考慮兼容的清除浮動(dòng)會(huì)用到。(如果你想放大或者縮小你的內(nèi)容，可以使用CSS 的transform)
上述方法可以在父容器的最后添加一個(gè)內(nèi)容為空存在與文檔流中并且清除左右浮動(dòng)的元素。父容器將會(huì)感知到這個(gè)空元素并且把自身空間撐開。
after和before
也可參考
bfc講解

bfc