问题标签 [clearfix]

我需要找到一种方法来清除一组浮动元素而无需额外标记。

例如，我有一个 2 列网格section#main_features。每个div.feature都有width: 50%并且是float: left。我想要的是找到一种方法来清除没有额外的 html 标记的行（因为我想制作一个简单的语义网格）。

请注意，这里的行只是一个“概念”（每行是两个.feature）。我正在使用语义方法来构建这个网格，因此我不想包装每一行的列，然后清除这个包装器。我正在寻找一些技巧来清除并仅使用 css - 或 scss，less 等来打破行。

这个问题似乎比看起来更复杂。

提前致谢。

1. 为什么不使用display:block？
2. 另外，为什么它也适用于::before伪类？

这里的社区似乎同意旧的“clearfix”黑客现在已被贬值和取代overflow:hidden。不幸的是，在某些情况下，即使使用这种方法也会导致问题。（例如：如果它工作正常，它看起来像这样。）

使用老式的主要问题<div class="clear">似乎是它创建了一个div仅用于改变表示的元素——这似乎混淆了纯语义标记与表示的理想。

但除此之外，它似乎适用于所有浏览器和所有情况（不能说“clearfix”或overflow:hidden）。

使用还有其他缺点clear:both吗？用起来真的有那么差吗？还是只是个人喜好？

我有一个正在处理的网页，当中间没有内容时，它看起来很棒。最近，当我尝试将内容添加到中心列时，问题就出现了。我正在添加一个表格，其中包含人们必须回答的一长串问题。问题是，当此内容大于窗口大小时，它会向下滚动内容，但侧边栏保持相同大小。

我在 jsfiddle 上附上了我的代码。任何帮助，将不胜感激。:)

http://jsfiddle.net/qp5Zk/3/ 1

我没有成功尝试 clearfix，但可能做错了什么，或者它甚至可能不是正确的解决方案。

我有一个页面的响应式布局。<aside>是具有恒定宽度的并且该区域.main具有margin-right。我这样做是因为我希望该.main区域能够适应不同的设备，同时<aside>保持不变。

http://jsfiddle.net/c6mZN/1/

如您所见，问题在于我在主区域内有一个也使用 clearfix 的对象列表，并且第一个元素一直清除对象，直到侧边栏结束。我想要的是它看起来和其他的完全一样.block

我怎么能做到这一点？

我正在对父级 (ul) 应用明确的修复，但它不起作用

当设置 display:block; 到a，然后清除修复有效，但是为什么呢？这里的代码

HTML

CSS

我正在尝试调整一个名为Pytheas的现有 Wordpress 主题（有关其功能的快速视频导览，请访问此页面）。这是一个面向展示投资组合的 WP 主题。主页设有幻灯片。我的目标是用嵌入的 Prezi 演示文稿替换幻灯片。

主页元素是（从上到下移动）：标题、菜单、幻灯片、标语、亮点、帖子。然而，主页是一个奇怪的小东西。它会忽略您在编辑窗口中输入的任何内容（而是仅使用已上传到另一个仪表板部分的图像）。

我已经确认Prezi-Embedder 插件适用于标准样式默认、博客和页面。我的假设是有一些 CSS 元素在起作用。

我的直觉（和一点点嗅探）说这段 CSS（来自 template-home.php）可能会起作用。特别是 clearfix：

这就是我向您求助的地方，StackOverflow 社区成员。我可以做些什么来提供额外的数据和/或上下文？

非常感谢您的关注。

马特·沃伦

我在计算宽度为 0 的 div 上将此类用于 css clearfix，但其中包含宽度 x 的内容。

发生的事情是，在我使用此类后，在 chrome 中，div 采用了其内容的宽度。但在 firefox中，div 采用其父级的宽度。

行为不应该是 div 在两个浏览器中都采用其内容的宽度吗？可能是什么问题？

试图让我的浮动元素与我的所有内容一起扩展时遇到问题。我已经做了一些研究，但我已经被正式难住/筋疲力尽了。我尝试了一些 clearfix 分辨率，标准的、微型的和内联的，基本上是这篇文章中列出的所有内容。

我的理论：

1. 我的语法有问题，或者我没有将 放在<div>正确的位置。
2. 我正在以不允许我扩展包装器的方式处理内容或帖子。
3. 我是一个非常特别的舔窗者。

我的代码

样式表：

网页：

这是我在 Chrome 上看到的图像：

任何解决方案、想法、资源、帮助、建议将不胜感激。

另外，我读到 FLOAT 模板会在某个时间点过时和/或不是设计网页的最佳方式。任何有关如何执行此操作的建议或资源也将受到欢迎。

编辑2013 年 4 月 24 日

添加查看页面源后收到的代码。

也是一个JS Bin复制。

我正在使用 twitter 引导程序，我clearfix在引导程序中遇到类问题。我的html是：

我期待的是水平线应该出现在显示文本的下一行，但它呈现在文本的右侧。如果我使用style='clear: both;'inhr比它工作正常。为什么clearfix不做同样的事情clear: both呢？