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

• 外邊距合并指的是當(dāng)兩個垂直邊框（通常是上和下）相遇時，會發(fā)生邊距合并，形成外邊框，值取最大值。
  因此，當(dāng)兩個垂直的外邊框相遇時（緊挨），且途中沒有任何元素擋住時（如另外的 border透明邊框 內(nèi)邊框padding））就能外邊距合并

• 不合并的方法有:

• float或者absolute使他們脫離文檔流

• 設(shè)置padding內(nèi)邊框

• 或者overflow設(shè)置兩個獨(dú)立的BFC（前提要有2個父元素單獨(dú)設(shè)置）

例子：

外邊距合并test.png

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

• 讓行內(nèi)塊元素標(biāo)簽緊挨 就是不能有空格 回車
• 設(shè)置負(fù)的margin-left
• 使用浮動
• 設(shè)置父元素的font-size：0

如圖

inline-block去除縫隙.png

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

因?yàn)閛verfolw使父元素形成了一個BFC，形成獨(dú)立空間，而BFC并不會受其他元素影響（子元素），因此可以撐開父元素高度

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

• BFC是形成一個獨(dú)立的空間，并其里的元素不受其外部元素影響。

• 形成BFC的方法如下：

• 浮動 絕對、固定定位

• overflow（除了visible）

• display:inline-block

• 作用

• 方便布局

• 消除外邊距合并

• 消除浮動（但不同于清除浮動 有副作用）

擴(kuò)展知識：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

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

• 指的是 因?yàn)楦邮乖孛撾x了文檔流，導(dǎo)致本該有的高度沒有了。
• 產(chǎn)生的原因是沒有指定高度
• 解決的方法
• 清除浮動clear:both
• overflow hidden（有副作用）

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

   .clearfix:after{   --------類clearfix的偽類after
   content: ''";  --------------放置需要生成的內(nèi)容
   display: block;  ----------轉(zhuǎn)換為塊級元素
   clear:both; ------  清除浮動
   }
   .clearfix{*zoom: 1;}  放大縮小比例  zoom:1就是和原來一樣大小

其實(shí)就是通過偽類創(chuàng)建一個子元素，讓他轉(zhuǎn)變?yōu)閴K級元素，并清除其受到的浮動
和BFC不同的是，clear:both僅僅是消除兩邊的浮動，而BFC是創(chuàng)建獨(dú)立的空間撐開，讓其不受其他元素影響。