1-1-8-2.position跟display、float、margin collapse、overflow这些特性相互叠加

拆成两个点来回答：1、'display'、'position' 和 'float' 的相互关系；2、position跟display、overflow、float下的margin collapse。

一、'display'、'position' 和 'float' 的相互关系

0.转换对应表：  

设定值：inline-table             计算值：table
设定值：inline,inline-block, table-row-group, table-column, table-column-group, 
table-header-group, table-footer-group, table-row, table-cell, table-caption, 
 run-in                            计算值：block
设定值：其他                        计算值：同设定值

1. 'display' 的值为 'none'
如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素
不产生框。因此浮动和定位无效。

2. 'position' 的值是 'absolute' 或 'fixed'
否则，如果 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float' 计算后的
值应该是 'none'，并且，'display' 会被按照上表设置。 框的位置将由 'top'，'right'，'bottom' 
和 'left' 属性和该框的包含块确定。

也就是说，"position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作
用，'display' 会被按规则重置。

3. 'float' 的值不是 "none"
如果 'float' 的值不是 "none"，该框浮动并且 'display' 会被按照转换对应表设置。

4. 元素是根元素（没有父元素就是根元素）
如果元素是根元素，'display' 的值按照转换对应表设置。

5. 否则，应用指定的 'display' 特性值。

二、position跟display、overflow、float下的margin collapse

1.行内元素与块级函数的三个区别
  a. 行内元素会在同一行排列，水平方向排列

     块级元素各占据一行，垂直方向排列，后面接着一个断行。
  b.行内元素设置width和height无效(可以设置line-height)，margin和padding上下无效
  c.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

扩展：既具有block的宽度高度特性又具有inline的同行特性。低版本IE是不支持inline-block的

2.标准模式与混杂模式下的盒模型
  a.标准模式下盒子的实际宽度和高度为：

  width/height + padding + border

  b.混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置
  overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。

3.什么是BFC？
  a.BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，是一个独立的布局环境，我们可以理解为
  一个箱子，箱子里面摆放的块级盒子是不受外界的影响的。
  b.BFC知识点集中在float、绝对定位、margin collaspe中。
  c.块级元素会自动生成一个block-level box（块级盒）。

  w3c规范中的BFC定义: 
  第一段：浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、
  table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。

  第二段：在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间
  的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。
  参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素
  是脱离BFC这一布局环境的，不参与BFC的布局

  折叠的结果：

       两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
       两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
       两个外边距一正一负时，折叠结果是两者的相加的和。

  第三段：在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），
  即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)，除非这个盒子新建了一个块
  级排版上下文(在某些情况下这个盒子自身会因为float而变窄)。  

4.margin collapse

产生折叠的必备条件：margin必须是邻接的!根据w3c规范，两个margin是邻接的必须满足以下条件：

 a.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
 b.没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开

都属于垂直方向上相邻的外边距，可以是下面任意一种情况

 a.元素的margin-top（必须是margin-top）与其第一个常规文档流的子元素的margin-top
 b.元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
 c.height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
 d.高度为0并且最小高度也为0，有垂直外边距的空元素

不产生折叠

 a.使元素成为BFC

 b.它们之间存在间隙,特殊间隙clearance

     一个BFC有三个div,第一个和第三个div没有浮动且没有clear，第二个浮动,那么第一和第三个div会发
     生collpse;第二种情况，就是第三个有clear属性，那么第三个的块盒的border-top恰好与第二个浮
     动元素的块盒的margin-bottom相邻，就有间隙了

 d.inline-block元素不与任何元素的外边距产生折叠。
     margin collapsing不发生在IFC
     inline-block不符合w3c规范所说元素必须是块级盒子的条件，因为规范中又说明，块级盒子的display
     属性必须是以下三种之一：'block'， 'list-item'， 和 'table'。

注意：margin collapsing与方向无关，更改了body的writing-mode，于是叠加发生在了水平方向
    （仅ie可看）

    body {
      writing-mode:tb-rl;
    }