为什么内联元素在浮动时表现得像块级元素？
Why do inline elements behave like block level elements when floated?
CSS 规范中的什么地方定义了这种行为？
如这两篇文章所述...
When you float an element it becomes a block box
An element that is floated is automatically display: block;
示例： 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>
因为<a>标签是行内元素
看这里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/
定义在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.
更新： 我接受了这个 。以下仍然是很好的信息，并为讨论添加了额外的上下文。
这是来自规范（粗体）...
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
投票 因为它确实指向 CSS 规范中验证此行为的位置，但是，我没有接受他的回答，因为它没有解释为什么会这样发生了。
关于块格式化上下文的补充阅读：
此行为在 CSS2.1 部分的第 3 点中定义：
9.7 Relationships between display, position, and float
The three properties that affect box generation and layout — display, position, and float — interact as follows:
- If
display has the value none, then position and float do not apply. In this case, the element generates no box.
- 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.
- Otherwise, if
float has a value other than none, the box is floated and display is set according to the table below.
- 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.
- 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│
└──────────────────────────────────────────────────────────┴──────────────────┘
在 Display Level 3 中，此过程称为 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]
CSS 规范中的什么地方定义了这种行为？
如这两篇文章所述...
When you float an element it becomes a block box
An element that is floated is automatically
display: block;
示例： 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>
因为<a>标签是行内元素
看这里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/
定义在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.
更新： 我接受了这个
这是来自规范（粗体）...
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
投票
关于块格式化上下文的补充阅读：
此行为在 CSS2.1 部分的第 3 点中定义：
9.7 Relationships between
display,position, andfloatThe three properties that affect box generation and layout —
display,position, andfloat— interact as follows:
- If
displayhas the valuenone, thenpositionandfloatdo not apply. In this case, the element generates no box.- Otherwise, if
positionhas the valueabsoluteorfixed, the box is absolutely positioned, the computed value offloatisnone, and display is set according to the table below. The position of the box will be determined by thetop,right,bottomandleftproperties and the box's containing block.- Otherwise, if
floathas a value other thannone, the box is floated anddisplayis set according to the table below.- Otherwise, if the element is the root element,
displayis set according to the table below, except that it is undefined in CSS 2.1 whether a specified value oflist-itembecomes a computed value ofblockorlist-item.- Otherwise, the remaining
displayproperty 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│ └──────────────────────────────────────────────────────────┴──────────────────┘
在 Display Level 3 中，此过程称为 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
noneorcontents, toblockorinline(respectively).Some examples of this include:
- Absolute positioning or floating an element blockifies the box’s display type. [CSS2]