为什么浮动允许内联元素的显式宽度？

Question

在创建包含多个span元素的表格行时，我无法设置内联元素<span>的宽度。一旦我放了float: left，我就可以修改宽度。

为什么我无法设置内联元素的宽度和高度？如何添加浮动更改东西？

Answer 1

根据定义，

Inline elements不采用明确的宽度或高度，而是内联并符合周围的元素。它们只占据标签所限定的空间。例如：

This is some <span>text</span>

<span>text</span>仅占据text的空间。它与 与HTML中的其他文本节点相同。

The float property表示块布局，并且元素的display属性更改为块（在大多数情况下），从而使它们block-level elements可以设置显式宽度和高度，因为它们占用了所有他们的容器。根据MDN文档：

  

由于float意味着使用块布局，它会修改display值的计算值，在某些情况下

在这种情况下，该表（可在MDN文档中查看）显示display: table-row的任何元素在浮动时都会被阻塞并具有display: block。

Answer 2

回答A ：

您无法明确设置内联元素的宽度，因为它相对 周围元素，因此受他们的< / strong>宽度。

回答B ：

使用display: block 浮动元素会自动将classmap应用于float。块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。

希望这有帮助！ ：）