html - CSS float 行为

Question

我正在制作一个用作菜单的 div(红色)(屏幕截图 1)，但是当我将 float:right; 添加到 css 时，页脚会弹出页面顶部(屏幕截图 2)

---

屏幕截图 1: 屏幕截图 2:

---

CSS:

.right-menu {
float:right;
width:10em;
height:35em;
background:red;/*temporary*/
padding:10px;
padding-top:20px;
padding-bottom:20px;
}

HTML:

<div class="right-menu">
    <form class="login">
        <input id="username" type="text" placeholder="User Name"/><br>
        <input id="password" type="password" placeholder="Password"/><br>
    </form>
    <form class="search">
        <input type="text" onkeyup="showResult(this.value)" placeholder="Search">
        <div id="livesearch"></div>
    </form>
    <a href="<? echo $siteAddress ?>download/password">Password</a><br>
    <a href="<? echo $siteAddress ?>support/contact">Contact</a><br>
    <a href="<? echo $siteAddress ?>support/help">Help</a><br>
    <a href="<? echo $siteAddress ?>legal/policy">Policy</a><br>
    <a href="<? echo $siteAddress ?>legal/terms">TOS</a><br>
    <a href="<? echo $siteAddress ?>support/adds">Adds</a><br>
</div>

知道发生了什么吗？

附注使用火狐

Answer 1

Any idea whats happening?

float 表示“移到一边。将此元素之后的任何内容放在另一边而不是下面。”

使用 clear 属性告诉内容不要在 float 元素旁边向上移动。

#footer {
    clear: right; /* or both */
}