5

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>
Kenneth Stoddard
  • 1,409
  • 11
  • 13

4 Answers4

4

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]
Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
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.

Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-1

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/

N.Atamaniuk
  • 9
  • 3
-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:

Community
  • 1
  • 1
Kenneth Stoddard
  • 1,409
  • 11
  • 13
  • 1
    Good try, but this is not right. You ask several questions that have slightly different answers. This answer is about Block Formatting Contexts, but as you can see from the quote BFCs can be established by inline level elements (inline-blocks) as well as block level elements. "An element that is floated is automatically display: block;" is defined by section 9.7 point 3 and the table that follows of CSS 2.1 - where you can see that it's not always true. "When you float an element it becomes a block box" is defined as per Paulie_D's answer. That all block boxes are block-level is section 9.2.1 – Alohci Jul 19 '16 at 22:54
  • Thanks for the feedback, your note concerning section 9.7 (point 3) is helpful. To be fair though, I only ask two questions. 1) Why do inline elements behave like block level elements when floated? 2) Where in the CSS spec does it define this behavior? The two are interrelated. Adding additional comments to my answer. – Kenneth Stoddard Jul 19 '16 at 23:44
  • 2
    I agree this can be misleading, but `display: block` is not a synonym of "establish new block formatting context". In fact, most `display: block` element do not establish a block formatting context, and things like `display: inline-block` do. – Oriol Jul 20 '16 at 01:02
  • Hat tip to @Alohci for pretty much providing the answer in the comment above, I think the missing part was the reference to `Automatic Box Type Transformations`. – Kenneth Stoddard Jul 20 '16 at 01:39