css - 为什么内联元素在 float 时表现得像 block 级元素？

Question

它在 CSS 规范的哪个位置定义了这种行为？

如这两篇文章所述...

Smashing Magazine

When you float an element it becomes a block box

CSS Tricks

An element that is floated is automatically display: block;

---

示例: https://jsfiddle.net/kennethcss/y6cmgubt/

a {
  /* for looks */
  background-color: #e1e1e1;
  line-height: 30px;
  text-align: center;

  /* Comment "float: left" out to test. Once the float is removed, neither
   * the height or width have any effect on the anchor because its default
   * display is inline.
   */
  height: 30px;
  float: left;
  width: 100px;
}

<nav>
  <a>Nav Item 1</a>
  <a>Nav Item 2</a>
  <a>Nav Item 3</a>
</nav>

Answer 1

此行为在本 CSS2.1 部分的第 3 点中定义:

9.7 Relationships between display, position, and float

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.

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━┓
┃ #Specified value#                                        ┃ #Computed value# ┃
┡━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━┩
│ inline-table                                             │ table            │
├──────────────────────────────────────────────────────────┼──────────────────┤
│ inline, table-row-group, table-column, table-column-group│ block            │
│ table-header-group, table-footer-group, table-row        │                  │
│ table-cell, table-caption, inline-block                  │                  │
├──────────────────────────────────────────────────────────┼──────────────────┤
│ others                                                   │ same as specified│
└──────────────────────────────────────────────────────────┴──────────────────┘

在显示级别 3 中，此过程称为 block 化:

2.7. Automatic Box Type Transformations

Some layout effects require blockification or inlinification of the box type, which sets the box’s outer display type, if it is not none or contents, to block or inline (respectively).

Some examples of this include:

• Absolute positioning or floating an element blockifies the box’s display type. [CSS2]