CSS浮动行为

Question

I am making a div (red) that acts as a menu (screenshot 1), but when I add float:right; to the css the footer pops to the top on the page (screenshot 2)

---

Screen Shot 1: Screen Shot 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>

Any idea whats happening?

ps using firefox

Answer 1

Any idea whats happening?

float means "Move to the side. Put any content after this element on the other side instead of below."

Use the clear property to tell content not to move up beside a floated element.

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