html - 标记为 clearfix 的 div 中空 HTML 注释的目的

Question

clearfix div中空注释的目的是什么？我认为这是针对某种较旧的浏览器 shim 的；不知道为什么你会想到处放空评论。似乎只有一两个 CSS 规则会更容易维护。

Answer 1

如果网站有两个相邻的 div 使用 display: inline-block，那么这些 div 之间的空白会在布局中增加烦人的空间。为了解决这个问题，开发人员使用 html 注释，从左 div 的结束标签之后开始，在右 div 的开始标签之前结束，标签之间没有空格。

Answer 2

CSS 可以（或当时可以）仅格式化元素和伪元素。需要浮动后的元素来清除浮动，即返回正常的文档流。

声明在“clear一个或两个 CSS 规则”中，尤其是那些选择器包含 (或 is) 的规则.clearfloat。这固定了浮动框的高度，该浮动框的最后一个子元素不是浮动的。我应该是这样的：

.clearfloat {
  clear: both;
}

已知更复杂和骇人听闻的解决方法，例如：

.clearfloat {
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

但在某些布局引擎（特别是 MSHTML < 8）中，清除元素必须有内容。然而，我们不希望该虚拟元素可见。因此（空）评论。

Answer 3

这实际上很常见。我年轻的时候也想过这个问题。据我所知，这是向其他程序员发出的信号，即 div 的内容是故意留空的，这在 div 中充当完全“空白”的内容。

在其他情况下，它可用于删除空格。