Por que em vez de ?

Question

Acabei de perceber que:

<div class="clear"/>

Depois de uma série de divs flutuantes, causam o layout havoc, enquanto

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

funciona bem.

Alguém pode explicar isso?

Este é o CSS:

div.clear {
    clear:both;
}

Answer 1

<div class="clear"/>

Se você está servindo uma página xhtml como text/html, os navegadores não estão lendo isso usando um analisador XML real. Eles estão usando um analisador HTML antigo e simples que não conhece tags de fechamento automático. Para um analisador HTML4, essa é apenas uma etiqueta aberta com uma pontuação estranha. (Se os analistas do navegador realmente usassem as regras do SGML, seria uma outra coisa indesejável completamente, mas elas não.)

Até o IE9 ficar generalizado, não poderemos servir páginas da web de uso geral como application/xhtml+xml, que é o que é necessário para fazer com que o navegador use regras reais de análise XML. Até aquele momento, se você escrever documentos XHTML, precisará tornar seus documentos também compatíveis com o HTML simples, o que significa sempre e só usando sintaxe de fechamento automático em elementos que são declarados como tendo um EMPTY Modelo de conteúdo. (img, br, etc.)

Existem mais regras sobre o que você precisa fazer para escrever XHTML compatível com HTML, mas essa é a mais importante. apêndice C do padrão XHTML 1.0 é uma lista das diferenças; Parece um pouco complicado, mas muitos dos recursos dos pontos que você não deseja usar de qualquer maneira, e alguns agora são irrelevantes, pois estão falando sobre ser navegadores antigos como o Netscape 4. A prática de colocar um espaço antes /> não é mais exigido por nada em uso comum, por exemplo.

Answer 2

De acordo com HTML 4.01 Spec, Seção 7.5.4, a <div> A tag requer uma tag de fechamento.

Answer 3

<div class="clear"/>  

Esta sintaxe não é válida html/xhtml. Qualquer tag que posso conter conteúdo não podes Seja auto -fechamento (mesmo que nenhum conteúdo seja necessário na tag. Portanto, conteúdo contendo tags como div, span, p etc, nunca pode ser tags de fechamento próprio. Por outro lado, tags que não podem conter conteúdo como <br /> deve sempre estar fechado.