为什么内联元素在浮动时会接受宽度和高度? [英] Why does an inline element accept width and height when floated?

问题描述

现在我有一个span元素，我给它宽度和高度，例如500px 我知道它是内联元素，因此它不接受宽度和高度，但是为什么当我浮动它时它会适用?

Now I have a span element I give it width and height for example 500px I know it inline element so it doesn't accept width and height but why it applies when I float it??

span.first {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  float: right;
}

span.second {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}

<span class="first">with float</span>
<span class="second">without float</span>

https://codepen.io/kemozzz/pen/KvVrXj

推荐答案

根据CSS规则，在大多数情况下，将float应用于元素时，该元素将成为块元素.内联和inline-block的元素将计算成块.

In accordance with CSS rules, when you apply float to an element, in most cases it becomes a block element. Elements that are inline and inline-block will compute to block.

来自MDN:

这篇关于为什么内联元素在浮动时会接受宽度和高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！