position跟display、margin collapse、overflow、float这些特性相互叠加

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

1. 'display' 的值为 'none'

如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。
2. 'position' 的值是 'absolute' 或 'fixed'
否则，如果 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float' 计算后的值应该是 'none'，并且，'display' 会被按照上表设置。 框的位置将由 'top'，'right'，'bottom' 和 'left' 属性和该框的包含块确定。
也就是说，当元素是绝对定位时，浮动失效，'display' 会被按规则重置。
3. 'float' 的值不是 "none"。
按照规则，SPAN 是行内元素，因此不能够设置其宽度和高度。但是浮动后，'display' 值按照转换对应表设置后，成为块级元素
4. 元素是根元素
如果元素是根元素，'display' 的值按照转换对应表设置。

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

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

margin collapse我觉得这里的意思应该是Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
其中所说的 margin 毗邻，可以归结为以下两点：
•这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
•这些 margin 都处于普通流中。
1.两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。

2.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠.

3.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠