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

Answer 2

浮动元素时，它会失去所有高度。因此，容器不知道扩展以包含它。您必须为容器提供足够大的高度以容纳浮动元素。

或者，您可以在浮动元素下方包含清除div。这是“所谓的”clearfix，并将强制容器按预期包含浮动元素。

要添加清算div，您可以将以下内容添加到标记中：

    <div class="thumb"></div>
    <div class="clearfix">&nbsp;</div> <!-- Add this line -->
</div>

并在你的CSS中：

.clearfix {
  clear: both;
  font-size: 1px;
}

Answer 3

float: right;会将元素移动到非浮动元素之后（我正在谈论HTML标记）。看看是否有效：

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

Answer 4

对所有主要div使用浮动，并且为#container

隐藏溢出：隐藏