float

none, left, right

float有时会改变display的值:
inline, inline-block -> block
inline-table -> table
inline-flex -> flex
inline-grid -> grid
table-* ->block
others -> same as specified

‘display’, ‘position’, and ‘float’关系

  1. 如果display:none, 则position和float不会生效,元素也不会生成box
  2. 如果position为absolute或fixed,box是绝对定位的,计算的float值为none,display按上面的规则
  3. 如果flaot不为none,display按上面的规则
  4. 元素是根元素,display按上面的规则
  5. 否则,display就按指定的值

参考

https://www.w3.org/TR/CSS2/visuren.html#visual-model-intro