float:right - 为什么在容器下面？

Question

我真的不明白为什么我的float: right;div低于容器div.我不知道如何解决这个问题.有人可以解释一下吗？我很久以前在另一个网站上遇到过这个问题,但完全忘记了如果我完成它我是如何设法修复它的.我希望它当然在容器内.

    <div id="menu">
        <div class="categories"></div>
        <img class="logo" src="#" />
        <div class="thumb"></div>
    </div>

-

#menu
{
    width: 960px;
    height: 70px;
    margin: auto;
    background-color: blue;
}

#menu .thumb
{
    background-color: aqua;
    float: right;
    height: 60px;
    width: 400px;
}

Answer 1

您应该阅读以下网页:http://css-tricks.com/795-all-about-floats/

最重要的部分是:

伟大的崩溃

使用浮点数的一个更令人困惑的事情是它们如何影响包含它们的元素(它们的"父"元素).如果这个父元素只包含浮动元素,那么它的高度就会崩溃为零.

您通常可以通过在容器末尾添加"清除"div来解决此问题,如下所示:

<div id="menu">
    <div class="categories"></div>
    <img class="logo" src="#" />
    <div class="thumb"></div>
    <div style="clear: both;"></div>
</div>