html - 我应该在哪里清理以使花车工作？

Question

我在浮动问题上遇到了一些问题，它们漂浮在容器外。

我知道你可以在这个问题上使用 clears，但我真的不明白他们做了什么或者他们应该去哪里解决问题。

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

可以在此处查看有问题的实时站点：

score 4 · Accepted Answer

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

clear意思是“如果我面前的东西在漂浮，请留在它下面”。

您可以使用clear使容器围绕其浮动内容展开 - 通过设置clear: both出现在浮动内容之后但在容器内部的零高度元素 - 但它不是解决该问题的最干净的方法。

而是overflow: hidden放在容器上。这将建立一个新的块格式化上下文并导致容器扩展以包含浮动的子项。

score 1 · Accepted Answer

Clear用于被对方入侵的div。因此，如果 div1 的一部分进入 div2，而 div 1 在 div2 的左侧，则在 div2 中插入 clear:left。

score 1 · Accepted Answer

要解决您的问题，请添加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您就可以开始了。

score 0 · Accepted Answer

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

4 回答 4