我可以使用哪些“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 确实有有用的应用程序，但它也被用作黑客。在使用clearfix之前，这些现代的CSS解决方案可能会很有用：

• CSS 弹性盒
• CSS 网格

---

现代 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>

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

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

笔记： 浮动元素是一个 img 在此示例中为 tag，但也可以是任何 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魔力 已经指出，当针对现代浏览器时，我们现在可以放弃 zoom 和 ::before 属性/值并简单地使用：

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

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

蒂埃里还提供：”一句警告: ：如果你从头开始一个新项目，那就去做吧，但不要将这种技术与你现在拥有的技术交换，因为即使你不支持旧的 IE，你现有的规则也会防止利润崩溃。”

---

微清除修复

全球最新采用的clearfix解决方案， 尼古拉斯·加拉格尔 (Nicolas Gallagher) 设计的 Micro Clearfix.

已知支持：火狐 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”，其他属性可用于 触发元素的“hasLayout”.

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

另一种清除浮动的方法是使用 overflow 属性是使用 下划线黑客. 。IE 将应用以下划线前缀的值，其他浏览器不会。这 zoom 财产触发因素 有布局 在IE中：

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

虽然这有效...使用 hack 并不理想。

---

馅饼：简易清算方法

这种较旧的“Easy Clearing”方法的优点是允许定位元素悬挂在容器的边界之外，但代价是更棘手的 CSS。

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

---

使用“clear”属性的元素

当你快速将一些东西拼凑在一起时，快速而肮脏的解决方案（有一些缺点）：

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

缺点

• 它不响应，因此如果布局样式根据媒体查询发生变化，可能无法提供所需的效果。纯 CSS 的解决方案更为理想。
• 它添加 html 标记，但不一定添加任何语义值。
• 它需要每个实例的内联定义和解决方案，而不是在 css 中对“clearfix”的单个解决方案的类引用以及在 html 中对它的类引用。
• 这使得其他人很难使用代码，因为他们可能需要编写更多的技巧来解决它。
• 将来当您需要/想要使用另一个clearfix解决方案时，您不必返回并删除每个 <br style="clear: both" /> 标签散落在标记周围。

Answer 2

我们试图解决什么问题？

浮动东西时有两个重要的考虑因素：

1. 包含后代花车。 这意味着相关元素使其自身高度足以包裹所有浮动后代。（他们不会挂在外面。）

   

2. 将后代与外部浮动隔离。 这意味着元素内部的后代应该能够使用 clear: both 并让它不与元素外部的浮动交互。

   

块格式化上下文

只有一种方法可以同时完成这两件事。那就是建立一个新的 块格式化上下文. 。建立块格式化上下文的元素是一个绝缘矩形，其中浮动相互交互。块格式化上下文将始终足够高，以在视觉上包裹其浮动后代，并且块格式化上下文之外的浮动不会与内部元素交互。这种双向绝缘正是您想要的。在 IE 中，同样的概念称为 有布局, ，可以通过设置 zoom: 1.

有多种方法可以建立块格式化上下文，但我推荐的解决方案是 display: inline-block 和 width: 100%. 。（当然，还有 通常的警告 与使用 width: 100%, ，所以使用 box-sizing: border-box 或放 padding, margin, ， 和 border 在不同的元素上。）

最稳健的解决方案

浮动最常见的应用可能是两列布局。（可以扩展到三列。）

首先是标记结构。

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

现在是CSS。

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

自己尝试一下

去 JS斌 尝试一下代码，看看这个解决方案是如何从头开始构建的。

传统的clearfix方法被认为是有害的

传统的问题 清除修复 解决方案 是他们使用两种不同的渲染概念来实现 IE 和其他所有人的相同目标。在 IE 中，他们使用 hasLayout 来建立新的块格式化上下文，但对于其他人，他们使用生成的框（:after） 和 clear: both, ，它不会建立新的块格式化上下文。这意味着事情不会在所有情况下都表现相同。有关为什么这不好的解释，请参阅 您对 Clearfix 的了解都是错误的.

Answer 3

新标准，采用 因纽特人.css 和 波旁酒 - 两个使用非常广泛且维护良好的 CSS/Sass 框架：

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

---

笔记

请记住，clearfixes 本质上是对 Flexbox 布局现在可以在 更聪明的方式. 。CSS 浮动最初是为内联内容流动而设计的 - 就像长文本文章中的图像 - 而不是网格布局等。如果你的 目标浏览器支持 Flexbox, ，值得研究一下。

这不支持IE7。你 不应该 支持IE7。这样做会继续使用户面临未修复的安全漏洞，并使所有其他 Web 开发人员的生活变得更加困难，因为它减少了用户和组织切换到现代浏览器的压力。

这个清除修复是 蒂埃里·科布伦茨 (Thierry Koblentz) 宣布并解释 2012年7月。它减轻了不必要的重量 Nicolas Gallagher 的 2011 年 micro-clearfix. 。在此过程中，它会释放一个伪元素供您自己使用。这已更新为使用 display: block 而不是 display: table （再次感谢蒂埃里·科布伦茨）。

Answer 4

我建议使用以下内容，摘自 http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Answer 5

溢出属性可用于清除浮动而无需额外标记：

.container { overflow: hidden; }

这适用于除 IE6 之外的所有浏览器，您所需要做的就是启用 hasLayout （缩放是我的首选方法）：

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Answer 6

我在官方 CLEARFIX-Method 中发现了一个错误：DOT 没有字体大小。如果你设置 height = 0 并且 DOM 树中的第一个元素具有“clearfix”类，页面底部始终有 12px 的边距:)

你必须像这样修复它：

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

它现在是 YAML 布局的一部分......看看它——非常有趣！http://www.yaml.de/en/home.html

Answer 7

这是一个非常整洁的解决方案：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

已知它可以在 Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+ 中运行

包括：无需在选择器之前清除浮子之前，但是它可以防止最高边缘崩溃。这样可以确保应用缩放：1时IE 6/7具有视觉一致性。

从 http://nicolasgallagher.com/micro-clearfix-hack/

Answer 8

从引导程序清除修复：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Answer 9

我只是用：-

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

效果最好并且与 IE8+ 兼容:)

Answer 10

鉴于回复量如此之大，我就不打算发帖了。然而，这种方法可能对某人有帮助，就像它对我有帮助一样。

尽可能远离漂浮物

值得一提的是，我避免像埃博拉这样的漂浮物。原因有很多，而且我并不孤单；阅读 Rikudo 的回答 什么是clearfix 你就会明白我的意思了。用他自己的话说： ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

除了浮动之外，还有其他好的（有时是更好的）选择。随着技术的进步和改进， 弹性盒 （和其他方法）将被广泛采用，浮动将成为一个糟糕的记忆。也许是CSS4？

---

浮动错误行为和失败的清除

首先，有时，您可能会认为自己不会出现浮动，直到您的救星被刺穿并且您的 html 流程开始下沉：

在代码笔中 http://codepen.io/omarjuvera/pen/jEXBya 下面，清除浮动的做法 <div classs="clear"></div> （或其他元素）很常见，但令人不悦且反语义。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

然而, ，就在您认为您的浮标值得航行时……繁荣！随着屏幕尺寸变得越来越小，您会看到奇怪的行为，如下图所示（相同 http://codepen.io/omarjuvera/pen/jEXBya):

你为什么要关心？我不确定确切的数字，但大约 80%（或更多）使用的设备是小屏幕移动设备。台式电脑/笔记本电脑不再是王者。

---

事情还没有结束

这并不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说 all you have to do is to place your floats in a container. 。但正如你在 代码笔 和图形，情况并非如此。这显然让事情变得更糟：

超文本标记语言

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

至于结果呢？

一样的！

你可能不知道，你将发起一个 CSS 聚会，邀请各种选择器和属性参加聚会；让你的 CSS 变得比你开始时更混乱。只是为了修复你的浮动。

---

CSS Clearfix 来救援

这个简单且适应性很强的 CSS 片段既美丽又“救世主”：

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

就是这样！它确实可以在不破坏语义的情况下工作，我有没有提到 有用？:

来自同一个样本...超文本标记语言

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

现在我们不再需要 <div classs="clear"></div> <!-- Acts as a wall --> 并让语义警察高兴。这不是唯一的好处。这个clearfix可以响应任何屏幕尺寸，无需使用 @media 以最简单的形式。换句话说，它可以控制您的浮动容器并防止洪水。最后，它提供了对旧浏览器的支持，一切都在一个小小的空手道中 =)

这是再次的清除修复

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Answer 11

我总是浮动网格的主要部分并应用 clear: both; 到页脚。这不需要额外的 div 或类。

Answer 12

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

我找到了 <br clear="all" /> 做到最简单、最简单。看到 class="clearfix" 到处都不能触动那些反对无关标记元素的人的情感，不是吗？你只是把问题画在不同的画布上。

我也用 display: hidden 解决方案，这很棒，不需要额外的类声明或 html 标记...但有时您需要元素溢出容器，例如。漂亮的丝带和腰带

Answer 13

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

Answer 14

我已经尝试了所有这些解决方案，将增加很大的利润 <html> 当我使用下面的代码时自动元素：

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

最后，我通过添加解决了边距问题 font-size: 0; 到上面的CSS。

Answer 15

对于 SASS，明确的解决办法是：

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

它的用法如下：

.container {
    @include clearfix;
}

如果你想要新的clearfix：

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Answer 16

更少（http://lesscss.org/），可以创建一个方便的clearfix助手：

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

然后将其用于有问题的容器，例如：

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Answer 17

使用 overflow:hidden/auto 如果浮动容器有父元素，则 ie6 的高度就足够了。

对于下面所述的 HTML 来说，任一 #test 都可以工作以清除浮动。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

如果这在 ie6 中不起作用，只需浮动父级以清除浮动即可。

#test {
  float: left; // using float to clear float
  width: 99%;
}

从来没有真正需要任何其他类型的清理。也许这是我编写 HTML 的方式。

Answer 18

我会漂浮 #content 同样，这样两列都包含浮动。还因为它可以让你清除里面的元素 #content 无需清除侧栏。

与包装器一样，您需要将其设为块格式化上下文来包装两列。

本文提到了一些您可以使用的触发器：块格式化上下文.

Answer 19

clearfix是一种使元素本身自动清除的方式，因此您无需添加其他标记。

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

通常您需要执行以下操作：

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

使用clearfix，您只需要

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Answer 20

一个新的显示值似乎可以在一行中完成。

display: flow-root;

来自 w3 规范：“该元素生成一个块容器框，并使用流布局来布局其内容。它总是为其内容建立一个新的块格式化上下文。”

信息：https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※如上面的链接所示，目前支持有限，因此可能会使用如下后备支持：https://github.com/fliptheweb/postcss-flow-root

Answer 21

为什么只是尝试使用 css hack 来完成 1 行 HTML 所做的工作。为什么不使用语义 html tu put 中断返回到该行？

对我来说确实更好用：

<br style="clear:both" />

而且，如果您不希望HTML中的任何样式 .clear { clear:both; } 在你的 CSS 中。

这样做的优点：

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

Answer 22

假设您使用以下 HTML 结构：

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

这是我将使用的 CSS：

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

我一直使用这个设置，它对我来说工作得很好，即使在 IE6 中也是如此。

Answer 23

我总是使用 微清除修复 :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

在 级联框架 我什至默认将它应用于块级元素。IMO，默认情况下将其应用在块级元素上可以使块级元素比其传统行为更直观。它还使我可以更轻松地将对旧浏览器的支持添加到 Cascade Framework（支持 IE6-8 以及现代浏览器）。

Answer 24

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

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

仅仅需要标记浮动的末尾这一事实并不允许 无人值守的CSS排版.

如果后者是您的目标，则浮动应该保持开放状态，以便任何内容（段落、有序和无序列表等）环绕它，直到遇到“clearfix”。例如，clearfix 可能由新标题设置。

这就是为什么我使用以下带有新标题的clearfix：

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

该解决方案广泛用于 我的网站 解决问题：浮动微型图旁边的文本很短，并且不考虑下一个清除对象的上边距。

它还可以防止自动生成时的任何手动干预 PDF 文件 从网站。这是一个 示例页面.

Answer 25

你也可以将其放入 CSS 中：

.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */

并将类“cb”添加到您的父 div 中：

<div id="container" class="cb">

您不需要在原始代码中添加任何其他内容...

Answer 26

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

Answer 27

你有没有尝试过这个：

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

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

Answer 28

我最喜欢的方法是在我的 css / scss 文档中创建一个clearfix 类，如下所示

.clearfix{
    clear:both
}

然后在我的html文档中调用它，如下所示

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>