问题标签 [clearfix]

我以为我了解 clearfix 的用途。但它可以在没有clearfix 的情况下正常工作。这是为什么？

这是我的 HTML：

和 CSS：

这就是我得到的（这就是我想要的）：

为什么没有clearfix 一切都很好？

我正在创建我的第一个真正的响应式布局，并在使用 css 和 clearfix 时遇到了困难。我做了一个 JS fiddle ( http://jsfiddle.net/brandrally/GFXP9/1/ ) 演示了我创建的代码的问题。

基本上，我只希望“第 1 行”和“第 2 行”位于彼此下方而没有空间。我计划在 .line div 中放置很多 div，因此我认为我需要清除它们。

CSS

HTML

网站 stinsonandassociates.com 在其移动导航菜单上使用了 clearfix（在小屏幕宽度下可见）。它不起作用，但我很好奇为什么我正在应用的 clearfix 类（使用 HTML5Boilerplate）至少不能识别 clearfix 属性。桌面导航菜单使用相同的类并且可以正常工作。

这是 HTML 代码：

我必须对我的列表项应用 clearfix 以便边框环绕我的浮动，但是一旦我添加了 clearfix，它会导致我应用到列表的自动换行停止工作，现在长 URL 将 div 扩展到其他分区。

如果有人可以帮助解决这个问题，将不胜感激。可以在此处查看该问题：http ://www.noellesnotes.com（页脚的推文部分）。

这是相关代码：

HTML

CSS

我会让自己适应52framework.com提供的内容。（HTML5、CSS3、JS 框架） 尽管看了网格教程视频和查看其他演示源代码，但我无法理解为什么框架使用<div class="clear"></div><!-- clear -->第 12 行的代码。

下面的代码地址是：http ://demo.52framework.com/demos/framework/grid.html

下面的代码也来自同一来源，但正如您所见<div class="clear"></div><!-- clear -->，即使此处已完成更多分区，此处也未使用一段代码。

相关CSS代码：

嗨，有时学习一些东西会让你更加困惑，我现在处于那个位置，在此先感谢。

我在这个地址问了一个问题：为什么使用<div class="clear"></div>？

在得到答案并接受后（我还阅读了评论部分中给出的链接），现在我有第二个和第三个问题。

根据相关问题中给出的输入代码，

1. 为什么下面的网格演示代码没有使用<div class="clear"></div>？同样存在 2 组两个浮动 div 元素，所以不适合<div class="clear"></div>在最后一个浮动 div 元素之后使用吗？

我明确提到我希望<div class="clear"></div>在两个地方有代码：就在之后<div class="col col_7">和之后<div class="col col_4">

2. 接受答案的所有者写道：“没有这个，你的导航元素后面的内容可能会出现在你的导航元素旁边，而不是在它下面。” 由于他使用了 MAY 语法，我删除<div class="clear"></div>并看到 IE9 和 Chrome 25.0.1364.172 的输出没有任何变化；是什么让他写了 MAY？旧浏览器（尤其是旧 IE 版本）？

我正在使用 Zurb Foundation 5，并希望在 .row 中有一个 .row ，以便 .row 可以充当多个列的包装器。这很好用，但是当我在内行内添加背景时，它会渗入顶行 - 这是正常行为吗？

我附上了截图和我正在使用的代码。

截屏：

我想删除由我的 D7 主题（MD 照片）中的 clearfix 元素引起的灰线。特别是div class="wrap clearfix"元素，它在元素的底部有一条不必要的灰线body。

我已经尝试了很多修复，但他们没有给我任何结果。这是列表，到目前为止

还有许多其他类似的边框和内容去除器想法。

谁能指出我正确的方向？

看看我的 html + css 代码：http: //jsfiddle.net/nP39E/1/

如果不明白我想要达到的目标，我会解释：

我想要一个页面，其中 div 向右浮动并占用 250px 宽度，而 div 则占用文档其余部分的宽度。

在左边的 div 中，你可以看到我还有一些其他的浮动元素，它们的高度是由右边的 div 影响的。您可以看到第一行（红色）的高度与右侧栏的高度对齐，并且与其内容的真实内容无关。

• 我使用组类来处理常见的浮动问题：.group:after { content: ""; display: table; clear: both; }

你能告诉我为什么会这样吗？

我有以下 HTML 结构：

（如果你不熟悉 HAML：上面的结构代表一棵 HTML 树。%aside.picture意思是<aside class='picture'>。）

侧边栏很高，向左浮动。

在文章中，图像也向左浮动。

我想以这样的方式清除文章，使每篇文章的高度都增长到其图像的底部，但不会增长到侧边栏的底部。

请看一个演示：http ://sassmeister.com/gist/9173268

请注意，第一篇文章的 clearfix 使其与侧边栏一样高。但我只希望它长得和图像一样高。

PS overflow: hidden可以解决问题，但是让我们假设文章包含应该能够出现在其容器之外的弹出元素？