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

您应该阅读以下网页： https ： //css-tricks.com/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>

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隐藏