Javascript css中的浮动导致元素向下移动，但当innerHTML被JS更改时，它会向上移动

我的网页上有一个元素，在样式表中应用Float:left时，它的位置会向下移动。但是，若我使用javascript函数来更改内部html，它会上升，当删除float left时，它会明显上升。不知道发生了什么事，我是个菜鸟：P 可能的原因和建议

html代码是

<script type="text/javascript">
    function runonhover() {
        document.getElementById("sitename").innerHTML = "Run...!!";
    }
</script>

<div id="sitename" onmouseover="document.getElementById('sitename').innerHTML = 'Run...!!';">
    <p>FurryLife</p>
</div>

---

通过设置innerHTML，可以删除

，而

有一些边距，导致元素四处移动。

通过设置

document.getElementById（'sitename'）。innerHTML='Run…！！'

将设置
运行并移除内部
标签
。使用
document.getElementById（'sitename'）。innerHTML='Run
 ",它不会干扰您的UI


#站点名称{
转变：转变0.6s；
显示：块；
宽度：50%；
高度：100px；
浮动：左；
边际：0px；
左侧填充：45px；
字体大小：56px；
颜色：#fff；
字体系列：冷水机，衬线；
文本阴影：rgb（185,82,19）3px 3px 3px；
}

函数runonhover（）{
document.getElementById（“sitename”）.innerHTML=“运行…！！”；
}
毛皮生活


#sitename {
    transition: transform 0.6s;
    display: block;
    width: 50%;
    height: 100px;
    float: left;
    margin: 0px;
    padding-left: 45px;
    font-size: 56px;
    color: #fff;
    font-family: chiller,serif;
    text-shadow: rgb(185,82,19) 3px 3px 3px;
}