position & display & float
position、display 和 float 三个属性叠加使用，会有我们意料不到的结果。但如果我们知道这三个属性的不同取值造成的影响以及它们的优先级，我们就能按照自己的想法来进行布局。
这里只列出了部分属性值
display: block | inline-block | inline | none | list-item | table ...
position: absolute | relative | fixed | static
float: left | right
display 设置了元素生成的框的类型，提一下 list-item 属性值，它会以块级元素形式显示，并添加样式列表标记。position 设置了元素的位置类型，static 是默认值，没有定位，元素在正常文档流中；fixed 以浏览器窗口进行绝对定位；absolute 生成相对于上一个已定位的父元素进行绝对定位。relative 生成相对于正常位置的相对定位元素。
优先级排序
- display 值为 none 时，元素不生成框，故 position 和 float 的设置无效。
- 如果 display 的值不为 none，当 position 的值为 absolute 或 fixed 时，也就是元素绝对定位时，浮动的设置就无效了，display 按转化规则（见下表）设置；
- 否则，浮动设置按取值（取值非 none ）定，而 display 按照转化规则设置；当 float 的值为 none 时，根元素的 display 以转化规则设置，非根元素则直接设定为 display 的取值。
See the Pen float&display by stacyyy (@Stacyyy) on CodePen.
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 |
| 其他 | 同设定值 |
以上转换，读者均可在示例中改变设置查看效果。