Why do inline elements behave like block level elements when floated?

Question

Where in the CSS spec does it define this behavior?

As stated in these two articles...

Smashing Magazine

When you float an element it becomes a block box

CSS Tricks

An element that is floated is automatically display: block;

---

Example: 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

This behavior is defined in the point 3 of this CSS2.1 section:

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│
└──────────────────────────────────────────────────────────┴──────────────────┘

In Display Level 3, this process is called blockification:

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]

Answer 2

It's defined in the Visual Formatting Model section 9.5.1

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

right

Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.