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

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

答案

根据所产生的设计,以下每个 clearfix CSS 解决方案都有其自己的优点。

该 clearfix 确实具有有用的应用程序,但也已被用作 hack。在使用 clearfix 之前,也许这些现代的 CSS 解决方案可能会有用:


现代 Clearfix 解决方案


容器overflow: auto;

清除浮动元素的最简单方法是使用样式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 解决方案,但是没有滚动条,但是使用hidden将裁剪位于包含元素之外的所有内容。

注意:在此示例中,float 元素是img标签,但也可以是任何 html 元素。


已清除 Clearfix

Thierry Koblentz 在 CSSMojo 上写道: 重新加载了最新的 clearfix 。他指出,通过放弃对 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 还提供了:“ 提醒您:如果您从头开始一个新项目,请继续,但不要将这种技术与您现有的技术互换,因为即使您不支持 oldIE,您现有的规则也会阻止您利润下降。”


微型 Clearfix

Nicolas Gallagher 的最新的 Clearfix 解决方案,即Micro 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;
}

溢流特性

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

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属性清除浮点数的另一种方法是使用下划线 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" />每个<br style="clear: both" />标记。

我们要解决什么问题?

浮动内容时有两个重要注意事项:

  1. 包含后代浮动。这意味着所讨论的元素本身足够高,可以包裹所有浮动后代。 (他们不挂在外面。)

    漂浮物悬挂在容器外

  2. 从外部花车中隔离后代。这意味着元素内部的后代应该能够使用clear: both使用且不与元素外部的浮点数交互。

    <code> clear:两者</ code>与DOM中其他地方的float交互

块格式化上下文

这两种方法只有一种。那就是建立一个新的块格式化上下文 。建立块格式上下文的元素是一个绝缘的矩形,其中的浮点数相互影响。块格式化上下文将始终足够高,以可视方式包装其浮动后代,并且块格式化上下文外部的浮点不能与内部元素交互。这种双向绝缘正是您想要的。在 IE 中,相同的概念称为hasLayout ,可以通过zoom: 1进行设置。

建立块格式化上下文的方法有多种,但我建议的解决方案是display: inline-block width: 100% display: inline-block 。 (当然, 通常需要注意的是使用width: 100% ,因此请使用box-sizing: border-box或将paddingmarginborder放在不同的元素上。)

最强大的解决方案

浮子最常见的应用可能是两列布局。 (可以扩展为三列。)

首先是标记结构。

<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 Bin来处理代码,并从头开始了解此解决方案的构建方式。

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

传统clearfix 解决方案的问题在于,它们使用两种不同的呈现概念来实现 IE 和其他所有人的相同目标。在 IE 中,他们使用 hasLayout 建立新的块格式化上下文,但是对于其他所有人,他们都使用带有clear: both生成框( :after ),但不会建立新的块格式化上下文。这意味着事情不会在所有情况下都一样。有关为什么这样做不好的解释,请参阅有关 Clearfix 的所有知识都是错误的

Inuit.cssBourbon使用的新标准 - 两个使用非常广泛且维护良好的 CSS / Sass 框架:

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

笔记

请记住,clearfix 本质上是针对 flexbox 布局现在可以以更智能的方式提供的工具 。 CSS 浮点数最初是设计用于使内联内容四处流淌的(如长篇文章中的图像),而不是用于网格布局等。如果您的目标浏览器支持 flexbox ,那么值得研究。

这不支持 IE7。您应该支持 IE7。这样做继续使用户面临无法修复的安全漏洞,并使所有其他 Web 开发人员的生活更加艰难,因为这减轻了用户和组织切换到现代浏览器的压力。

该 clearfix 由 Thierry Koblentz在 2012 年 7 月宣布并解释 。它摆脱了Nicolas Gallagher 的 2011 年 micro-clearfix 的不必要的限制 。在此过程中,它将释放一个伪元素供您自己使用。它已更新为使用display: block而不是display: table (再次归功于 Thierry Koblentz)。

我建议使用以下内容,该内容取自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;  
}

溢出属性可用于清除浮点数,而无需额外的标记:

.container { overflow: hidden; }

这适用于除 IE6 之外的所有浏览器,您需要做的就是启用 hasLayout(缩放是我的首选方法):

.container { zoom: 1; }

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

我在官方的 CLEARFIX 方法中发现了一个错误:DOT 没有字体大小。而且,如果您将height = 0设置为height = 0并且 DOM-Tree 中的第一个 Element 具有类 “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

这是一个很整洁的解决方案:

/* 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 + 中运行

不必包括:before 选择器来清除浮点数,但它可以防止在现代浏览器中折叠上边距。这样可以确保在应用 zoom:1 时与 IE 6/7 保持视觉一致性。

来自http://nicolasgallagher.com/micro-clearfix-hack/

引导程序中的 Clearfix:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

我只用:-

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

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

鉴于大量的回复,我不愿发表。但是,这种方法可能确实对我有所帮助。

尽可能远离花车

值得一提的是,我避免像埃博拉病毒那样漂浮。原因很多,我并不孤单。阅读 Rikudo 答案,了解什么是 clearfix ,您将明白我的意思。用他自己的话说: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

除了浮动以外,还有其他好的(有时更好)的选择。随着技术的进步和改进, flexbox (和其他方法)将被广泛采用,并且浮动将成为不好的记忆。也许是 CSS4?


浮动行为不当和清除失败

首先,有时候,您可能会认为自己是安全的,直到救生员被刺破并且 html 流开始下沉为止:

在下面的 Codepen http://codepen.io/omarjuvera/pen/jEXBya中,使用<div classs="clear"></div> (或其他元素)清除浮点数的做法很常见,但对此却不予理 and 并反语义。

<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 ):

浮动错误示例1

你为什么要在乎呢?我不确定确切的数字,但使用的设备中约有 80%(或更多)是带有小屏幕的移动设备。台式机 / 笔记本电脑不再是国王。


它不止于此

这不是浮点数的唯一问题。有很多,但在此示例中,有些人可能会说, all you have to do is to place your floats in a container 。但是正如您在代码笔和图形中所看到的,情况并非如此。这显然使事情变得最糟:

的 HTML

<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;
}

至于结果呢?

一样的! 浮动错误示例2

最不知道的是,您将开始一个 CSS 派对,邀请各种选择器和属性参加该派对。比起步时造成的 CSS 混乱更大。只是为了解决您的浮动问题。


CSS Clearfix 可以解救

这个简单而又适应性强的 CSS 片段是一个美丽而 “救世主”:

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

而已!它确实可以在不破坏语义的情况下工作,我是否提到它可以工作?

来自同一示例... HTML

<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

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