为什么内联元素在浮动时的行为像块级元素？ [英] Why do inline elements behave like block level elements when floated?

问题描述

在CSS规范中哪里定义了这种行为？

正如这两篇文章所述...

当你浮动一个元素时，它变成一个块状框

CSS技巧

浮动的元素会自动 display：block; code>








---

示例： https://jsfiddle.net/kennethcss/y6cmgubt/

a {/ * for looks * / background-color：＃e1e1e1; line-height：30px; text-align：center; / *注释float：left出来测试。一旦浮点被删除，*高度或宽度都不会对锚点产生任何影响，因为它的默认*显示是内联的。 * / height：30px; float：left; width：100px;}

 < nav& < a> Nav Item 1< / a> < a> Nav Item 2< / a> < a> Nav Item 3< / a>< / nav>  

这个行为定义在CSS2.1部分的第3点： >

9.7 display ， position 和 float

影响框生成和布局的三个属性 -   显示 ， position 和 float - 交互如下：

1. 如果 显示 的值为 none ，则 position 和 float 不适用。在这种情况下，元素不生成框。


2. 否则，如果 position 的值为 absolute 或固定，该框是绝对定位的，计算的值 float 是 none ，并根据下表设置显示。框的位置将由 top确定 ， 右 ， bottom 和 <


3. 否则，如果 float 具有除 none 之外的值，则将浮动框，并根据下表设置 display / li>
   
4. 否则，如果元素是根元素，则 display 根据下表设置，除了它在CSS 2.1中未定义 list-item 的指定值是否为块或列表项的计算值。


5. 否则，剩余的 display 属性值将按照指定应用。

 ┏━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━┩
│inline-table│表│
├────────────── ────────────────────────────────────────────────────────────────────────────────── ────┤
│inline，table-row-group，table-column，table-column-group│block│
│table-header-group，table-footer-group，table-row ││
│表格单元格，表格，inline-block││
├─────────────── ──────────────────────────────────────────────────────────────────── ──┤
│其他│与指定相同│
└────────────────────── ─────────────────────────
 




在显示级别3中，此过程称为阻止：

2.7。自动框类型转换

某些布局效果需要 blockification 或 inilification ，其中设置框的外部显示类型，如果它不 none 或 contents 到 block 或 inline （分别）。

这样的一些示例包括：

• 绝对定位或浮动元素阻止框的显示类型。 [CSS2]




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>

解决方案

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]

这篇关于为什么内联元素在浮动时的行为像块级元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！