我可以使用哪些“ 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网格

容器用 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放在另一个包含父元素的元素上来解决。

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

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

已清除Clearfix

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

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

这是最新的clearfix版本。

⋮

⋮

较旧的Clearfix解决方案

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

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

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

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

CSS Mojo的 ThierryKoblentz 指出，当定位现代浏览器时，我们现在可以删除zoom和::before属性/值，而只需使用：

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

该解决方案不支持IE 6/7……故意！

Thierry还提供：“ 提醒您：如果您从头开始一个新项目，请继续，但不要将这种技术与您现有的技术互换，因为即使您不支持oldIE，您现有的规则也会阻止您利润下降。”

微型Clearfix

Nicolas Gallagher的MicroClearfix是最新和全球采用的clearfix解决方案。

已知支持：Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+

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

溢流特性

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

- 介绍如何解决与此相关的技术，即常见的问题，设置width: 100%在容器上。

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

display可以使用其他属性来触发元素的“hasLayout”，而不必使用该属性为IE设置“hasLayout” 。

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

使用该overflow属性清除浮点数的另一种方法是使用下划线hack。IE将应用带下划线前缀的值，其他浏览器则不会。该zoom属性触发IE中的hasLayout：

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

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

PIE：轻松清除方法

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

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

元素使用“清除”属性

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

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

缺点

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