外边距合并/BFC

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 以下是 三种发生外边距合并的场景：
  (1) 在普通文档流中,当两个兄弟元素的垂直外边距相遇时，会发生外边距合并。如下图所示。避免此种情况下外边距合并的方法：使元素BFC化。
  

(2) 如果一个盒子没有border-top或padding-top,那么它的上边距会和第一个子元素的上边距重叠,如下图所示.避免此种情况下外边距合并的方法：给父元素添加padding-top或border-top。

(3) 自身元素空间没有撑开时，发生自身外边距合并。

• 如何合并
  margin值为都为正值时取最大值。
  margin值为都为负数取绝对值最大值。
  margin值一个为正数一个为负数取两者的和。

2.去除inline-block内缝隙有哪几种常见方法?

（1）去除inline-block元素标签间因空格回车产生的间隔
（2）父元素设置font-size:0
（3）给inline-block设置浮动
（4）使用负边距

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

使用over:auto/hidden后，父元素形成了一个独立的空间（BFC），不受外界外部干扰，从而能撑开高度。

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

• BFC即Block Formatting Context，他能提供一个环境，使元素在这个环境中按照一定规则进行布局。这个环境中的元素不会影响到其它环境中的布局，也不会受其他元素的影响。
• float的值不为none。
  overflow的值不为visible。
  display的值为table-cell, table-caption, inline-block中的任何一个。
  position的值不为relative和static。
• 多栏布局、阻止外边距合并、清除浮动。

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？

浮动元素脱离文档流，让父元素感知不到内部有元素存在，从而会形成高度塌陷。
解决方法总体上分两种：
1.使父元素BFC化（包括设置float:left/right , overflow:auto/hidden, display:inline-block等）
2.在设置了浮动的子元素后插入设置了clear:both属性的空标签或伪元素

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{ 
    content: '';       /*伪元素内容为空*/
    display: block;   /* 伪元素是block元素*/
    clear: both;    /* 两侧清除浮动*/
 }
.clearfix{ 
     *zoom: 1;    /*为了兼容IE低版本，IE6/7不支持：after伪元素，zoom可触发IE的haslayout属性,类似于形成BFC清除浮动*/
 }

代码题

1.实现如下效果的导航条
导航条
2.利用BFC的原理实现下图所示两栏布局
两栏布局