display、position和float的关系

Posted by Eleanor Mao on 2017-07-31

【翻译自W3C

displaypositonfloat这三个属性都会影响盒子模型和布局, 他们的关系影响如下:

  • 如果display的值设为none,那么positionfloat不会被应用。这种情况下,元素不会生成盒子。
  • 如果position如果值设为absolutefixed,被定位后的盒子会将float计算为none,display会按照下表表现。 如果该盒子定义了toprightbottomleft属性,那么该盒子则是块级的。
  • 如果float定义为none以外的值,那么这个盒子的display则如下表表现。
  • 如果该元素是根元素,display则如下表表现。除了在CSS2.1中因list-item会被计算为block还是list-item是未定义的。
  • 其余display属性会按所指定属性表现。
属性计算为
inline-tabletable
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblock
others如所设置的