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/