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可以让前面的子元素被父元素识别的原理。

---