Question

我对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而不是消除需要清除：两个div）。

Answer 1

是的，有两种不同的方法来制作＆＃34; clearfix＆＃34;。

更直接的方法是简单地添加另一个使用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样式添加清除元素而不是在标记中添加元素。这些＆＃34; clearfix＆＃34;的一些变体。代码包含CSS hacks，例如第二个示例中的* html hack。

＆＃34; clearfix＆＃34;的另一种方法是使用overflow风格的副作用。将overflow（visible除外）应用于元素会使其包含子元素，如果您没有指定元素的尺寸，它仍将从内容中获取其大小，并且赢得了＆＃39; t是任何实际的溢出。例如：

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

这种方法感觉有点像黑客，但它实际上是一个记录良好且有意识的效果，所有浏览器都支持。

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

1 个答案: