我可以使用哪种'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 flexbox
• 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>

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

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

注意:浮动元素是img此示例中的标记,但可以是任何html元素.

Clearfix重新加载

CSSMojo上的Thierry Koblentz写道:重新加载了最新的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,你的现有规则也会阻止利润率下降."

Micro Clearfix

最新和全球采用的clearfix解决方案,Nicolas Gallagher的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属性清除浮动的另一种方法是使用下划线黑客.IE将应用前缀为下划线的值,其他浏览器则不会.该zoom属性在IE中触发hasLayout:

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

虽然这很有效但是使用黑客并不理想.

PIE:简易清算方法

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

这个解决方案很老了,但你可以学到所有关于位置就是一切的简单清理:http://www.positioniseverything.net/easyclearing.html

元素使用"清除"属性

快速和肮脏的解决方案(有一些缺点),当你快速拍打一起时:

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

缺点

• 如果布局样式基于媒体查询而改变,则它不响应并因此可能不提供期望的效果.纯CSS的解决方案更理想.
• 它添加了html标记,而不必添加任何语义值.
• 它需要每个实例的内联定义和解决方案,而不是对hss中css和类引用中的"clearfix"的单个解决方案的类引用.
• 它使代码很难与其他人合作,因为他们可能不得不编写更多的黑客来解决它.
• 将来当您需要/想要使用另一个clearfix解决方案时,您不必返回并删除<br style="clear: both" />标记周围散布的每个标记.

Answer 2

我们试图解决什么问题？

浮动时有两个重要的考虑因素:

1. 含有后代花车.这意味着所讨论的元素使其自身足够高以包裹所有浮动后代.(他们不会挂在外面.)

   

2. 从外面漂浮的绝缘后代.这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮点交互.

   通常的告诫使用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 Bin来使用代码,看看这个解决方案是如何从头开始构建的.

   传统的clearfix方法被认为有害

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

Answer 3

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

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

笔记

请记住,clearfixes本质上是一个很好的方式,可以更灵活地为Flexbox布局提供什么.CSS浮动最初设计用于内联流内容 - 如长文本文章中的图像 - 而不是网格布局等.如果您的目标浏览器支持flexbox,那么值得研究.

这不支持IE7.你不应该支持IE7.这样做会继续使用户暴露于不固定的安全漏洞,并使所有其他Web开发人员的生活更加艰难,因为它减少了用户和组织切换到现代浏览器的压力.

这个clearfix是由Thierry Koblentz于2012年7月宣布和解释的.它从Nicolas Gallagher的2011微型clearfix中减轻了不必要的重量.在此过程中,它释放了一个伪元素供您自己使用.这已被更新为使用display: block而不是display: table(再次归功于Thierry Koblentz).

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

overflow属性可用于清除浮点数而无需额外标记:

.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-Layout的一部分......只需看看它 - 它非常有趣! 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+

包括:before选择器不需要清除浮点数,但它可以防止顶部边距在现代浏览器中折叠.这确保了当应用zoom:1时,IE 6/7具有视觉一致性.

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

Answer 8

来自bootstrap的Clearfix:

.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...

除了花车之外,还有其他好的(有时更好的)选择.随着技术的进步和改进,flexbox(和其他方法)将被广泛采用,浮动将成为一个糟糕的记忆.也许CSS4？

浮动不当行为和失败的清除

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

在下面的codepen 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.但正如您在codepen和graphic中看到的那样,情况并非如此.这显然使事情变得更糟:

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

至于结果呢？

一样的!

至少你知道,你将开始一个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 */
}

Answer 11

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

Answer 12

如果浮动容器具有父元素，则对 ie6使用overflow:hidden/auto和 height 就足够了。

#test 中的任何一个都可以工作，因为下面说明的 HTML 可以清除浮动。

#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 13

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

我发现<br clear="all" />它是最简单,最简单的.class="clearfix"到处都看不到那些反对无关的市场元素的人的感情,可以吗？你只是在不同的画布上绘制问题.

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

Answer 14

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

Answer 15

使用 LESS ( 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 16

使用 SASS，clearfix 是：

@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 17

一个新的显示值似乎在一行中的作业。

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