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

【问题标题】：Are there two different things called clearfix?有两种不同的东西叫做 clearfix 吗？
【发布时间】：2014-11-02 14:16:56
【问题描述】：

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

.clearfix {
  overflow: auto;
}

另一方面，当您不希望下一个元素浮动时，我们有一个 clearfix 似乎用于消除放置 <div style="clear: both"></div> 的需要。这种 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 的需要）。

【问题讨论】：

可以有不同的实现。但无论如何，想法都是一样的。
我想知道Hides from IE-mac，Mac 上的 IE？ :P
“奥迪和宝马看起来不一样，怎么都叫汽车呢？”
@dfsq 但是当他们解决两个完全不同的问题时，怎么会有相同的想法？

标签： html css clearfix

【解决方案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，但它实际上是一种有据可查的故意效果，所有浏览器都支持。

【讨论】：