html - float : right - Why below container?

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

您应该阅读此网页:https://css-tricks.com/all-about-floats/

最重要的部分是:

The Great Collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.

您通常可以通过在容器末尾添加一个“清除”div 来解决此问题，如下所示:

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