css - 我可以使用哪些“clearfix”方法？

Question

我有一个古老的问题，就是div包装了两列布局。我的侧边栏处于浮动状态，因此我的容器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确实具有有用的应用程序，但也已被用作hack。在使用clearfix之前，也许这些现代的CSS解决方案可能会有用：


css flexbox
css grid




现代Clearfix解决方案



带有overflow: auto;的容器

清除浮动元素的最简单方法是在包含元素上使用样式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>

缺点是，在外部元素上使用margin和padding的某些组合会导致出现滚动条，但这可以通过在其他包含父元素的元素上放置margin和padding来解决。

使用“溢出：隐藏”也是clearfix解决方案，但是不会具有滚动条，但是使用 hidden会裁剪位于包含元素之外的所有内容。

注意：在此示例中，float元素是 img标记，但可以是任何html元素。



已清除Clearfix

Thierry Koblentz在CSSMojo上写道： The very latest clearfix reloaded。他指出，通过放弃对oldIE的支持，该解决方案可以简化为一个CSS语句。此外，当带有clearfix的元素是同级元素时，使用 display: block（而不是 display: table）可使页边距正确折叠。

.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：如果您从头开始一个新项目，请继续做下去，但是不要将此技术与您现有的技术互换，因为即使您不支持oldIE，您现有的规则也可以防止崩溃利润。”



微型Clearfix

最新和全球采用的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属性清除浮点数的另一种方法是使用 underscore hack。 IE将应用带下划线前缀的值，其他浏览器则不会。 zoom属性在IE中触发 hasLayout：

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

虽然可行，但使用骇客并不理想。



PIE：轻松清除方法

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

这个解决方案已经很老了，但是您可以了解有关“位置即一切”的轻松清算的全部信息： http://www.positioniseverything.net/easyclearing.html



元素使用“清除”属性

快速而肮脏的解决方案（有一些缺点），可帮助您快速将某些东西拍打在一起：

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

缺点


如果布局样式基于媒体查询而更改，则它没有响应，因此可能无法提供所需的效果。纯CSS解决方案更为理想。
它添加html标记，而不必添加任何语义值。
它需要为每个实例提供内联定义和解决方案，而不是对CSS中“ clearfix”的单个解决方案的类引用以及html中对其的类引用。
它使其他人难以使用代码，因为他们可能不得不编写更多的hack来解决它。
将来，当您需要/想要使用另一个clearfix解决方案时，您将不必回去删除标记周围乱扔的每个 <br style="clear: both" />标签。