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 flo

Answer 1

Update: I accepted this answer. The following is still good info and adds additional context to the discussion.

---

Here it is from the spec (in bold)...

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

---

Up-voted @Paulie_D's answer because it does indeed point to a place in the CSS spec that authenticates this behavior, however, I did not accept his answer because it doesn't explain why this happens.

---

Additional reading on Block Formatting Context:

• https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
• http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

Answer 2

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 3

Its because <a> tag is inline element.
Look here http://www.w3schools.com/html/html_blocks.asp
It should help you,and if you create only <a> elements they are also will be floated inline: https://jsfiddle.net/r4r11d3h/

Answer 4

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.