【CSS】display、position、float 三者的优先级

1. display 的值是 none

如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。

2. position 的值是 absolute 或 fixed

如果 position 的值是 absolute 或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续进行3。

此时，元素的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。

3. float 的值不是 none

如果 float 的值不是 none，则元素浮动，并且 display 的值 按照 对应表 设置。否则，继续进行4。

4. 元素是根元素

如果元素是根元素，display 的值 按照 对应表 设置。否则，继续进行5。

5. 应用指定的 display 特性值

display的转换对应表

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

position:absolute 和 float 会隐式的改变 display 的类型

不论之前是什么类型的元素（display:none 除外），只要设置了 position:absolute 或 float，都会让元素以 display:inline-block 的方式显示，可以设置长宽，默认宽度并不会占满父元素，就算是显示的设置 display:inline 或 display:block，仍然无效。 

float 在 IE6 下的 双倍边距bug 就是利用添加 display:inline 来解决的。 

position:relative 并不能够隐式的改变 display 的类型。

参考：

https://blog.csdn.net/github_34514750/article/details/51895897

https://blog.csdn.net/qq_41720311/article/details/83929291

https://www.iteye.com/blog/zccst-2193102

END