有两种不同的东西叫做clearfix吗

Question

我对clearfix到底是什么有点困惑。一方面，我们遇到了零高度div的情况，其中浮动元素不占用空间。解决方案是在容器上放置以下clearfix类：

.clearfix {
  overflow: auto;
}

另一方面，我们有一个clearfix，当您不希望下一个元素浮动时，它似乎可以用来消除放置<div style="clear: both"></div>的需要。这个破解通常更为复杂，类似于HTML5浏览器板中的以下内容：

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

为什么这些概念被称为相同的东西？我说的不是同一个问题的不同解决方案，而是两个完全不同的问题（修复零高度div与消除对clear:bothdiv的需要）。

Answer 1

是的，有两种不同的方法来制作"clearfix"。

更直接的方法是简单地添加另一个使用clear样式的元素。这里显示的内联CSS只是为了演示：

<div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="clear:both"></div>
</div>

这有一个缺点，即清除元素往往会占用一些空间，尤其是在旧版本的IE中，它有一个奇怪的想法，即元素必须至少有一个字符高。为了使clearing元素在所有浏览器中都不可见，开发了您在第二个示例中看到的精心设计的样式。

稍后还有其他变体，例如使用content样式添加clearing元素，而不是在标记中添加元素。这些"clearfix"代码的一些变体包含CSS黑客，比如第二个示例中的* html黑客。

"clearfix"的另一种方法是使用overflow样式的副作用。将overflow（而不是visible）应用于元素将使其包含其子元素，如果不为元素指定维度，则它仍将从内容中获取其大小，并且不会有任何实际溢出。示例：

<div style="overflow:hidden">
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
</div>

这种方法感觉有点像黑客攻击，但它实际上是一种有据可查的有意效果，所有浏览器都支持。