CSS "clear: both" 不起作用，element 保持在彼此的一边

Question

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

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

如果您运行代码，您可以看到 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>

Answer 1

clear: both; 仅与浮动的元素相关，这与您的 span 无关（这些跨度是 inline-blocks，但这是另一回事，clear对inline-blocks)

没有影响

CSS "clear: both" 不起作用，element 保持在彼此的一边

CSS "clear: both" not working, element keeps staying on the side of each other

html

css

css-float