为什么<div class =“clear”> </div>而不是<div class =“clear”>？</div>

Question

我刚刚意识到：

<div class="clear"/>

一系列浮动div导致布局破坏后，而

<div class="clear"></div> 

工作正常。

任何人都可以解释一下吗？

这是CSS：

div.clear {
    clear:both;
}

Answer 1

<div class="clear"/>

如果您以text/html的形式提供XHTML页面，则浏览器不会使用真正的XML解析器来读取它。他们使用的是一个普通的HTML解析器，它不知道自闭标签。对于HTML4解析器，这只是一个带有一些奇怪标点符号的开放标记。 （如果浏览器解析器确实使用了SGML的规则，那么它将完全是一些其他不受欢迎的事情，但它们不会。）

在IE9普及之前，我们将无法将通用网页作为application/xhtml+xml提供服务，这是使浏览器使用真正的XML解析规则所需要的。在此之前，如果您编写XHTML文档，则需要使文档向后兼容纯HTML，这意味着始终和仅使用元素的自动关闭语法声明具有EMPTY内容模型的声明。 （img，br等。）

关于编写与HTML兼容的XHTML需要做些什么，还有更多规则，但这是最重要的规则。 XHTML 1.0标准的Appendix C是差异列表;它看起来有点复杂，但很多要点都解决了你不想使用的功能，有些现在无关紧要，因为它们正在谈论像Netscape 4这样的古老浏览器。在{{之前放置空格的做法例如，任何常用的东西都不再需要1}}。

Answer 2

根据HTML 4.01 spec，Section 7.5.4，<div>代码需要结束标记。

Answer 3

<div class="clear"/>  

此语法无效HTML / XHTML。 包含内容 的任何标记都不能 自行关闭（即使标记中不需要任何内容​​。因此包含div，span，p等标签的内容永远不能是自动关闭标签。相反，不能包含<br />等内容的标签应始终自动关闭。