我可以使用哪种'clearfix'方法？

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

PIE:简易清算方法

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

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

元素使用"清除"属性

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

缺点

如果布局样式基于媒体查询而改变,则它不响应并因此可能不提供期望的效果.纯CSS的解决方案更理想.

它添加了html标记,而不必添加任何语义值.

它需要每个实例的内联定义和解决方案,而不是对hss中css和类引用中的"clearfix"的单个解决方案的类引用.

它使代码很难与其他人合作,因为他们可能不得不编写更多的黑客来解决它.

将来当您需要/想要使用另一个clearfix解决方案时,您不必返回并删除
标记周围散布的每个标记.

我们试图解决什么问题？

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

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



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



sidebar
sidebar
sidebar
main content main content that uses clear: both

而现在的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的所有内容都是错误的.

---

在http://stackoverflow.com/questions/1794350/what-is-haslayout上阅读有关`hasLayout`的更多信息.我认为它是建立新的块格式化上下文的同义词.执行此操作的元素基本上负责其所有后代元素的布局.这样做的一个结果是,建立新块格式化上下文的元素包含浮动后代,并且元素外部的浮点数不会与内部的`clear:left | right | both`元素交互.(这是上面的答案.)

3> iono..：

---

新标准,由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).

---

我希望你的答案得到更多的投票,因为我完全赞同你.再次,它是2013年,我真的相信这是人们应该使用的解决方案.

---

同意.http://theie7countdown.com/检查您自己的分析,希望看到IE7不值得您花时间.

4> Eric the Red..：

---

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

---

谁现在还记得IE-mac？为什么因为不相关的问题而使事情变得如此复杂？

5> Jack Sleight..：

---

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

---

`overflow:hidden`具有裁剪内容的**效果**; 它具有清除容器的**副作用;-)

---

overflow:hidden在PS3浏览器中不起作用.并不是说大多数人都需要它来工作,但这是在PS3中炸毁我的网站的最重要的事情,我们正试图出于商业原因.啊.

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



7> paulslater19..：

---

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

/* 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/



8> 小智..：

---

来自bootstrap的Clearfix:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}



9> Salman von A..：

---

我只是用: -

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

效果最好,兼容IE8 + :)

---

......这就是为什么他说"与IE8 +兼容".大多数网站不再需要支持IE7,全球使用率不到1%.http://theie7countdown.com/

10> Omar..：

---

鉴于我不会发布大量的回复.但是,这种方法可能对某些人有所帮助,因为它确实帮助了我.

尽可能远离花车

值得一提的是,我避免像埃博拉这样的漂浮物.原因很多,我并不孤单; 阅读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中,用

(或其他元素)清除浮动的做法很常见但是皱眉和反语义.

1st
2nd
3nd
 
Below

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

  
1st
  
2nd
  
3nd
 
 
Below

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

    
1st
    
2nd
    
3nd

Below

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 */
}

---

现在我们不再需要

并保持语义警察的快乐.这不是唯一的好处.此clearfix响应任何屏幕大小,而不使用@media最简单的形式.换句话说,它将使您的浮动容器受到控制并防止洪水泛滥.最后,它在一个小空手道斩上提供对旧浏览器的支持=)
这是再次使用clearfix

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

---

具有`clear`类名称的元素不起作用的原因是你的属性`class`是错误的.你写的是`classs`,附加`s`.

11> 小智..：

---

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



12> duggi..：

---

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

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

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

---

`溢出:隐藏`我认为你的意思

13> Musa Butt..：

---

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