为什么用 <div class="clear"></div> 而不是 <div class="clear"/>？答案

【问题标题】：Why <div class="clear"></div> instead of <div class="clear"/>?为什么用 <div class="clear"></div> 而不是 <div class="clear"/>？
【发布时间】：2020-07-07 06:12:51
【问题描述】：

我才意识到：

<div class="clear"/>

在一系列浮动 div 导致布局混乱之后，

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

工作正常。

谁能解释一下？

这是 CSS：

div.clear {
    clear:both;
}

【问题讨论】：

标签： html css css-float

【解决方案1】：

<div class="clear"/>

如果您将 XHTML 页面作为text/html 提供服务，则浏览器不会使用真正的 XML 解析器来读取它。他们使用的是一个普通的旧 HTML 解析器，它不知道自闭标签。对于 HTML4 解析器来说，这只是一个带有一些奇怪标点符号的开放标签。（如果浏览器解析器真的使用了 SGML 的规则，那完全是另一种不受欢迎的东西，但他们没有。）

在 IE9 普及之前，我们将无法以application/xhtml+xml 的形式提供通用网页，这是使浏览器使用真正的 XML 解析规则所必需的。在那之前，如果您编写 XHTML 文档，您将需要使您的文档也向后兼容纯 HTML，这意味着 always 和 only 在元素上使用自闭合语法声明为具有EMPTY 内容模型的内容。（img、br等）

关于编写与 HTML 兼容的 XHTML 必须执行的操作还有更多规则，但这是最重要的一条。 XHTML 1.0 标准的Appendix C 列出了不同之处；它看起来有点复杂，但许多要点都解决了您无论如何都不想使用的功能，而且有些现在无关紧要，因为他们正在谈论像 Netscape 4 这样的古老浏览器。在@987654328 之前放置一个空格的做法例如，任何常用的东西都不再需要 @。

【讨论】：

“直到 IE ${whatever} 我将 100 岁”
如果您将 DOCTYPE 放在页面的开头，行为也可能会发生变化。
DOCTYPE 不影响解析器模式；即使使用属性 XHTML 文档类型，如果文档被作为 text/html 提供，浏览器仍将使用传统的 HTML 解析器。当然，由于它模拟了 IE5 时代的错误，所以没有 doctype 并因此处于 Quirks 模式确实会弄乱许多与 CSS 浮动有关的其他行为......

【解决方案2】：

根据HTML 4.01 spec、Section 7.5.4，<div>标签需要一个结束标签。

【讨论】：

【解决方案3】：

<div class="clear"/>

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

【讨论】：