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

Question

Where in the CSS specification does it define this behavior?

As stated in these two articles ...

Smashing magazine

When you float an element, it becomes a block block

CSS tricks

The element that floats 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>

Run codeHide result

Answer 1

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

9.7 Relations between display, positionandfloat

Three properties that affect the creation and layout of boxes - display, positionand float- interact as follows:

• display none, position float . .
• , position absolute fixed, , float - none, . top, right, bottom left , .
• , float , none, display .
• , , display , , CSS 2.1 undefined , list-item block list-item.
• display.

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━┓
┃ #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 :

2.7.

blockification inlinification , none contents, block inline ().

:

• . [CSS2]

Answer 2

9.5.1

, , . , , , . :

, . , ( "clear" ).

"left", , , , .

Answer 3

: . - .

---

( )...

9.4.1

, , (, , - ), , "", visible ( , ) .

, , . "margin". .

, , ( , ). ( - ), ( - ).

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

---

@Paulie_D, CSS, , , , .

---

:

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

Answer 4

Its because the tag <a>is an inline element.
Look here http://www.w3schools.com/html/html_blocks.asp
This should help you, and if you create only those elements <a>that they will also float inline: https://jsfiddle.net/r4r11d3h/