inline-block、BFC、边距合并

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

• 合并场景：相邻的两个盒子（有可能是兄弟关系也可能是父子关系）的外边距可以结合成一个单独的外边距。当一个元素没有内容、高度、边框以及内边距时，其自身的上下外边距也会发生合并。
  如何合并：
• 两个相邻的外边距都是正数时，折叠结果是它们之间较大的值
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个相邻的外边距一正一负时，折叠结果是两者相加的和。
  如何不合并：
• 在父容器上设置border或者padding使父子元素的外边距不相邻。
• 创建了新的BFC的元素（例如浮动元素或者overflow值为visible以外的元素）与它的子元素的外边距不会折叠
• 浮动元素和绝对定位元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
  原因：浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC**，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。
• inline-block元素不与任何元素的外边距产生折叠
  原因：inline-block不符合w3c规范所说元素必须是块级盒子的条件，因为规范中又说明，块级盒子的display属性必须是以下三种之一：'block'， 'list-item'， 和 'table'。

2 . 去除inline-block内缝隙的常见方法：

• 将排列的元素放在一行，标签之间没有空格。此方法简单但不美观。
• 将下一个元素的<和上一个元素的> 同行写。与第一个方法相比增加了代码的可读性。
• 设置负margin-left，但是第一个元素的margin-left值需要单独调整为0，否则会发生偏移。
• 使用float浮动，但是需要在其块级容器上清除浮动（overflow: hidden | auto）,较为麻烦。
• 将font-size值设置为0，此方法最简单实用。

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

• 这样可以形成BFC，让容器内的子元素和外面的元素互不影响。
  overflow的值为auto|hidden设置了将超出的内容隐藏。

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

• BFC是什么 :
  BFC的意思为块格式化上下文，这个上下文不受相邻元素的影响，包裹住了自己的内容形成了一个独立的区间，这个块级上下文可以包裹住浮动流，这样在块级元素中的浮动元素也不会引起容器高度的塌陷。
  如何形成BFC：
• 为元素添加float非none的属性值
• 为元素添加postion:absolute
• 为元素添加display:inline-block | table-cells | table-caption
• 为元素添加overflow:auto | hidden
  作用：
• 防止外边距合并
• 清除浮动
• 使用BFC避免文字环绕

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

• 父容器高度塌陷是指当其中元素为浮动时，父容器的高度不能被撑开以包裹住子元素。
• 因为为元素添加浮动之后，会导致元素脱离文档流，导致其内容在父容器中抽离出来，由于父容器高度为自适应，即其高度全靠子元素内容撑开，子元素消失而父容器高度自然就会塌陷。
• 解决方法
  1.给父容器设置高度
  2.设置父容器浮动（使子元素与父容器在同一纬度）
  3.触发父容器bfc
  4.设置伪元素:after，设置为块级元素，并清除伪元素的左右浮动
  代码示例

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

.clearfix:after{                          //使用伪元素
         content: '';                     //添加的内容为空
         display: block;                  //以块级元素形式显示
         clear: both;                     //清除两侧浮动效果
}
.clearfix{
       *zoom: 1;                         //使元素在IE6/7中也达到上述效果（兼容）
}

• 以上两段代码的作用都是清除浮动，但是作用的场景不同。另外与通过父容器建立BFC的原理不同，它使用clear属性去清除浮动。after伪元素在IE8及以上才支持，所有第二段*zoom=1以防第一段代码失去效用之后，用来防止清除浮动失败。
• 第一段代码是通过在父容器clearfix设置伪元素，在父容器最后添加内容为空的块级元素，并使用clear:both;达到清除浮动的目的。
• 第二段代码的解释是：zoom属性是IE浏览器的专有属性，它本来是用来设置或检索对象的缩放比例，但原有属性很少被使用，最常使用的是利用触发IE浏览器的haslayou，以达到清除浮动和外边距合并的目的。

代码

7 . 实现如下效果的导航条

• 代码示例

8 . 利用BFC的原理实现下图所示两栏布局

<div id="header">header</div>
 <div id="content">
         <div class="aside">aside</div>
         <div class="main">
                   我是main
                   我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main...
        </div>
   </div>
 <div id="footer"></div>

• 代码示例

- 参考

w3cplus-理解 bfc 和边距合并
w3c-bfc
w3c-边距合并