javascript - 在CSS中 float ，导致元素向下移动，但是当JS更改了innerHTML时，它就会上升

我的网页上有一个元素，当应用Float时它的位置会向下移动：在样式表中的左边。但是，如果我使用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>

相应的css是

#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;
}

最佳答案

通过设置document.getElementById('sitename').innerHTML = 'Run...!!';
将设置Run...!!并移除内部<p></p> tag。使用document.getElementById('sitename').innerHTML = '<p>Run...!!</p>';它不会干扰您的用户界面。

#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;
}

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

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