Question

我遇到浮动问题但浮在容器外的问题。

我知道你可以在这个问题上使用清除但我并不真正了解他们做了什么或者他们应该去哪里解决问题。

我创建了一个清晰的类，因此我可以使用<br class="clear" />

有问题的实时网站可以在这里看到：

Answer 1

float表示“移到一边，让这个元素后面的内容出现在它旁边”

clear表示“如果我面前的某些东西浮动，请保持低于它”。

您可以使用clear使容器展开其浮动内容 - 通过在浮动内容之后但在容器内部显示的零高度元素上设置clear: both - 但它不是最清洁的方法来解决这个问题。

改为在容器上设置overflow: hidden。这将建立一个新的block formatting context并使容器展开以包含浮动的子项。

Answer 2

Clear用于被另一个入侵的div中。因此，如果div1的一部分进入div2而div的一部分是div2，那么在div2中插入clear：left。

Answer 3

要解决您的问题，请将overflow:hidden添加到#content。

#content {
    margin-top: 60px;
    text-align: center;
    overflow: hidden;
}

这只是一个可能的解决方案。正如提示：http://www.quirksmode.org/css/clearing.html

对于您的问题：我不建议您在文档中添加额外的标记以清除浮动。这是一个糟糕的做法！一个非常普遍和稳定的解决方案是Nicolas Gallagher引入的micro clearfix hack。您只需要为#content添加一个课程，然后就可以开始了。

Answer 4

您应该在最后一个浮动元素之后将clear: both应用于块级元素（如div）。这样清除的元素将被定位在所有浮动元素的下方，并且它将向下推动其容器的底部以覆盖它们。