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

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
+4
source share
4 answers

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:

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━┓
┃ #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]
+3

9.5.1

, , . , , , . :

, . , ( "clear" ).

"left", , , , .

+2

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/

-1
source

Source: https://habr.com/ru/post/1648409/


All Articles