BLOCK、BFC、邊距合併,滑鼠懸浮選單出現

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可以讓前面的子元素被父元素識別的原理。