CSS“明确：两者均不起作用”，元素始终保持彼此对立

问题描述

我正在玩一些代码。但是，我有一个问题：

为什么clear: both标签下的span命令不起作用？

如果运行代码，则可以看到span元素（由青色表示）与div元素在同一行。我不明白为什么会这样。我的意思是，我知道可以解决该问题的解决方法，但是我想了解为什么在这种特定情况下它不起作用？

谢谢！！！ =）

span{
    height: 50px;
    width: 75px;
    display: inline-block;
    background: rgb(0,255,255);
    clear: both;
}

div{
    height: 100px;
    width: 34%; /*ocupa 34% da tela*/
    background: greenyellow;
    display: block;
    float: right;
    clear: both;
}

p{
    background: rgb(225,11,233);
    width: 200px;
    height: 100px;
    clear: both;
}

    <section>Olá hello</section> 
<hr>

    <span> Oi</span>
    <span> Oi 2</span>
    <span> Oi 3</span>
    <div> Hello</div>
    <div> Hello 2 </div>
    <div> Hello 3</div>
    <p> Hi</p>
    <p> Hi 2</p>
    <p> Hi 3</p>
</body>
</html>

解决方法

clear: both;仅与浮动元素相关，而span则不是（那些跨度是内联块，但这是另一回事，clear无效）在内联代码块上

css-float html