9.7 “display”,“position”,“float”之间的关系(done) - acelan86/css GitHub Wiki

影响盒生成和布局的这三个属性——“display”,“position”,和“float”——以下面的描述的方式相互作用:

  1. 如果“display”的值为“none”,“position”和“float”属性不会被应用。在这种情况下,这个元素不会生成盒。
  2. 否则,如果“position”的值为“absolute”或“fixed”,盒为绝对定位。“float”计算出的值为“none”,而“display”根据下面的表格设置。盒的位置根据“top”,“right”,“bottom”和“left”属性与盒的包含块决定。
  3. 否则,如果“float”是除“none”以外的值,盒为浮动的,且“display”根据下面的表格设置。
  4. 否则,如果元素是根元素,“display”根据下面的表格设置,除了CSS2.1中没有定义一个规范值的“list-item”,它的计算值可以是“block”或者“list-item”。
  5. 否则,剩下的“display”属性值使用指定值。

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

  1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
  2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
  3. Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
  4. Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
  5. Otherwise, the remaining 'display' property values apply as specified.
指定值 计算值
Inline-table Table
inline,table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others Same as specified
⚠️ **GitHub.com Fallback** ⚠️