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

①相鄰的兄弟元素的外邊距margin會有合并現象會塌陷collapse，但是浮動的元素不會邊距合并。

有了float不會合并邊距

沒有float會合并邊距

②父元素和它的第一個/最后一個子元素——如塊級元素有margin-top與它的子元素margin-top之間沒有padding、border等任何東西的分割，那么父元素和子元素就會有邊距合并的結果。

可以看到無視了父元素的margin-top:50px

③塊級元素——如果塊級元素之間margin-top和margin-bottom沒有任何東西分割，那么會有上下邊距合并的情況。

·不讓相鄰元素邊距合并

一、可以為父元素創建BFC，為父元素寫padding或者border

二、兄弟元素可以寫float，position:absolute，display:inline-block。

2、去除inline-block內縫隙有哪幾種常見方法?

①直接在HTML代碼界面把例如li之間的符號鏈接起來，除去代碼中的空白。

②給父元素寫font-size:0px;

③使用負的margin強行拉位置，一般寫-4px；

④省略結束標簽

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

為父元素創建了BFC,相當于獨立的小宇宙來囊括下面脫離文檔流的子元素。

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

一、BFC（block formatting context）

二、給父元素寫一下任何一個代碼display:inlne-block;/ overflow:auto;/ overflow:hidden;

或者是.className:after{

? ? ? ? ? ?display:block;

? ? ? ? ? ?content:"";

? ? ? ? ? ?clear:both;

}

className指的父元素的CSS名字，后面加:after寫偽類。

三、作用是影響頁面布局

5、浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法

浮動會讓子元素脫離文檔流，父元素不認可子元素的存在，自然不會撐開。

父元素有border但是不被子元素撐開

解決方法問題4的回答二已經做了解釋。就是形成BFC來解決。

6、以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？

.clearfix:after{

? ? ? content:'';

? ? ? display: block;

? ? ? clear: both;

}

是放在父元素位置的，after是偽類選擇器，原理是在父元素最后面加了一個空的內容，并且有clear:both讓父元素內的脫離文檔流的浮動元素又被父元素認可存在，來撐開父元素

.clearfix{

*zoom:1;

}

這是給IE6、7、8看的，因為IE老版本不識別上面的clearfix:after里面的代碼，所以用zoom:1可以實現類似的效果

這里的方法不是直接的BFC撐開，是用了一個父元素里面多個子元素的時候，末尾的子元素寫clear:both可以讓前面的子元素被父元素識別的原理。

? ? ? ? ? ? ? ? ? ? ? ? ??