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

Question

我才意识到:

<div class="clear"/>

经过一系列的浮动div导致布局破坏,而

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

工作良好.

有谁能解释一下？

这是CSS:

div.clear {
    clear:both;
}

Answer 1

<div class="clear"/>

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

在IE9普及之前,我们将无法为通用网页提供服务application/xhtml+xml,这是使浏览器使用真正的XML解析规则所需要的.在此之前,如果你写XHTML文档,你需要让你的文件,也有普通的HTML,这意味着向后兼容总是和只使用于该声明有一个元素自闭的语法EMPTY内容模型.(img,br等)

关于编写与HTML兼容的XHTML需要做些什么的规则有很多,但这是最重要的规则.XHTML 1.0标准的附录C是差异列表; 它看起来有点复杂,但许多要点都解决了你不想使用的功能,有些现在无关紧要,因为他们谈论的是像Netscape 4这样的古老浏览器.之前放置空间的做法/>是否定的例如,通常使用的任何东西所需的时间更长.

Answer 2

根据HTML 4.01规范,第7.5.4节,<div>标记需要一个结束标记.