我可以使用哪些“clearfix”方法?

我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

似乎有很多方法可以修复Firefox中的明显错误:

< br清楚= "所有" / > 溢出:汽车隐藏溢出:

在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。

目前可用的哪种方法是最稳健的?

当前回答

与其他clearfix不同，这是一个没有容器的开放式clearfix

其他清除操作要么要求被浮动元素位于标记良好的容器中，要么需要额外的语义上为空的<div>。相反，明确分离内容和标记需要严格的CSS解决方案来解决这个问题。

仅仅因为需要标记浮点数的结尾，就不允许进行无人值守的CSS排版。

如果后者是你的目标，浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放，直到遇到“clearfix”。例如，clearfix可以通过一个新标题来设置。

这就是为什么我使用以下clearfix与新标题:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

这个解决方案在我的网站上被广泛使用，以解决以下问题:浮动的微型对象旁边的文本很短，下一个清除对象的上边距不受尊重。

它还可以防止从站点自动生成pdf时的任何人工干预。这是一个示例页面。

其他回答

我只用:-

.clear:after{
  clear: both;
  content: "";
  display: block;
}

工作最好，兼容IE8+:)

为什么只是试图使用css hack来做1行HTML做的工作。为什么不使用语义html tu放断点返回行?

Fo me真的更好用:

<br style="clear:both" />

如果你不想在你的html中添加任何样式，你只需要使用class作为你的break 然后输入。clear {clear:both;}。

这样做的好处:

html返回行的语义使用如果没有CSS加载，它将工作不需要额外的CSS代码和Hack 不需要用CSS模拟br，它已经存在于HTML中

你试过这个吗:

<div style="clear:both;"/>

我用这个方法没有任何问题。

当我们在div元素中使用float属性时，clearfix就可以解决这个问题。如果我们使用两个div元素一个作为float:left;另一个是float:right;我们可以对两个div元素的父元素使用clearfix。如果我们拒绝使用clearfix不必要的空间填充下面的内容和网站结构将被打破。

诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?

我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情，不是吗?你只是把问题画在了另一幅画布上。

我还使用了display: hidden解决方案，这很好，不需要额外的类声明或HTML标记…但有时您需要元素溢出容器，例如。漂亮的丝带和饰带

推荐文章