html - 是否有两种不同的东西叫做 clearfix？

Question

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

.clearfix {
  overflow: auto;
}

另一方面，我们有一个 clearfix，它似乎被用来摆脱放置 <div style="clear: both"></div> 的需要。当您不希望下一个元素 float 时。这种 hack 通常更加详尽，例如 HTML5Boilerplate 中的以下代码:

.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: both div 的需要)。

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 中，它们有一个奇怪的想法，即一个元素总是必须至少有一个字符高。为了使清除元素在所有浏览器中不可见，开发了您在第二个示例中看到的精心设计的样式。

后来还有其他变体，例如使用 content 样式来添加清除元素，而不是在标记中添加元素。这些“clearfix”代码的一些变体包含 CSS hack，例如第二个示例中的 * html hack。

“clearfix”的另一种方法是使用 overflow 样式的副作用。将 overflow(visible 除外)应用到一个元素将使它包含它的子元素，如果你没有为元素指定维度，它仍然会从内容，不会有任何实际溢出。示例:

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

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