时间戳

首页 > 解决方案 > CSS“清除：两者”不起作用，元素一直保持在彼此的一边

html - 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>

标签： htmlcsscss-float

解决方案

clear: both;only 与浮动的元素相关，而您的情况并非如此span（那些跨度是内联块，但这是另一回事，clear对内联块没有影响）

推荐阅读