Pourquoi un élément en ligne accepte-t-il la largeur et la hauteur lorsqu'il est flottant?

Question

Maintenant, j'ai un élément span je lui donne la largeur et la hauteur par exemple 500px Je connais l'élément inline donc il n'accepte pas la largeur et la hauteur, mais pourquoi il s'applique quand je le flotte?

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

Answer 1

Conformément aux règles CSS, lorsque vous appliquez flottant à un élément, dans la plupart des cas, il devient un élément de bloc. Les éléments qui sont inline et inline-block seront calculés pour bloquer.

De MDN:

Answer 2

Lorsque vous flottez un élément, il devient automatiquement display: block.

SPEC:

https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo