css - 我可以使用 ‘clearfix’ 的哪些方法？

Question

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

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

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

<br clear="all"/>

overflow:auto

overflow:hidden

在我的情况下，唯一似乎正常工作的是 <br clear="all"/>解决方案，这有点邋遢。 overflow:auto给了我讨厌的滚动条和 overflow:hidden肯定有副作用。
此外，IE7 显然不应该由于其不正确的行为而遭受此问题，但在我的情况下，它与 Firefox 遭受的痛苦相同。

我们目前可用的哪种方法最健壮？

Answer 1

根据正在生成的设计，以下每个 clearfix CSS 解决方案都有其自身的优势。

clearfix 确实有有用的应用程序，但它也被用作黑客。在您使用 clearfix 之前，这些现代 css 解决方案可能很有用:

css flexbox

css grid

现代 Clearfix 解决方案

带 overflow: auto; 的容器

清除 float 元素的最简单方法是使用样式 overflow: auto在包含元素上。此解决方案适用于所有现代浏览器。

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

一个缺点是，在外部元素上使用边距和填充的某些组合可能会导致滚动条出现，但这可以通过将边距和填充放在另一个包含元素的父元素上来解决。

使用‘overflow: hidden’也是一个clearfix解决方案，但不会有滚动条，但是使用 hidden将裁剪位于包含元素之外的任何内容。

注意: float 元素是 img本例中的标签，但可以是任何 html 元素。

清除修复重新加载

CSSMojo 上的 Thierry Koblentz 写道: The very latest clearfix reloaded .他指出，通过放弃对 oldIE 的支持，该解决方案可以简化为一个 css 语句。此外，使用 display: block (而不是 display: table )允许边距在带有 clearfix 的元素是兄弟元素时正确折叠。

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

这是 clearfix 的最现代版本。

⋮

⋮

较旧的 Clearfix 解决方案

以下解决方案对于现代浏览器不是必需的，但对于定位较旧的浏览器可能有用。

请注意，这些解决方案依赖于浏览器错误，因此只有在上述解决方案都不适合您时才应使用。

它们大致按时间顺序列出。

“Beat That ClearFix”，现代浏览器的 clearfix

CSS Mojo 的蒂埃里·科布伦茨 (Thierry Koblentz)已经指出，在针对现代浏览器时，我们现在可以删除 zoom和 ::before属性/值，只需使用:

.container::after {
    content: "";
    display: table;
    clear: both;
}

此解决方案不支持 IE 6/7 ......故意的!

Thierry 还提供:“ A word of caution :如果您从头开始一个新元素，那就去吧，但不要将这种技术与您现在拥有的技术交换，因为即使您不支持旧 IE，您现有的规则也会防止崩溃边距。”

微清修

最新且全局采用的 clearfix 解决方案 Micro Clearfix by Nicolas Gallagher .

已知支持:Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

溢出属性

这种基本方法适用于通常情况，当定位的内容不会显示在容器边界之外时。

http://www.quirksmode.org/css/clearing.html
- 解释了如何解决与此技术相关的常见问题，即设置 width: 100%在容器上。

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

而不是使用 display属性为 IE 设置“hasLayout”，其他属性可用于 triggering "hasLayout" for an element .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

使用 overflow 清除 float 的另一种方法属性是使用 underscore hack . IE 将应用以下划线前缀的值，其他浏览器不会。 zoom属性触发器 hasLayout在 IE 中:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

虽然这有效……但使用 hacks 并不理想。

PIE:简单的清除方法

这种旧的“轻松清除”方法的优点是允许定位的元素悬卡在容器的边界之外，但代价是更棘手的 CSS。

这个解决方案已经很老了，但您可以了解有关头寸就是一切的轻松清算的所有信息: http://www.positioniseverything.net/easyclearing.html

使用“clear”属性的元素

当您快速将某些东西放在一起时，快速而肮脏的解决方案(有一些缺点):

<br style="clear: both" /> <!-- So dirty! -->

缺点

它没有响应性，因此如果布局样式基于媒体查询而改变，则可能无法提供所需的效果。纯 CSS 的解决方案更理想。

它添加了 html 标记，而不必添加任何语义值。

它需要每个实例的内联定义和解决方案，而不是对 css 中“clearfix”的单个解决方案的类引用和 html 中对它的类引用。

这使得其他人难以使用代码，因为他们可能需要编写更多的 hack 来解决它。

将来当您需要/想要使用另一个 clearfix 解决方案时，您将不必返回并删除每个 <br style="clear: both" />标记散落在标记周围。