Warum <div class="clear"></div> anstelle von <div class="clear"/>?

Question

Das ist mir gerade klar geworden:

<div class="clear"/>

nach einer Reihe von fließenden Divs verursacht Chaos im Layout, während

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

funktioniert gut.

Kann jemand das erklären?

Dies ist das CSS:

div.clear {
    clear:both;
}

Answer 1

<div class="clear"/>

Wenn Sie eine XHTML-Seite als text/html Die Browser lesen sie nicht mit einem echten XML-Parser. Sie verwenden einen einfachen, alten HTML-Parser, der sich nicht mit selbstschließenden Tags auskennt. Für einen HTML4-Parser ist das einfach nur ein offener Tag mit seltsamen Satzzeichen darin. (Würden Browser-Parser wirklich die Regeln von SGML verwenden, wäre es etwas völlig anderes, aber das tun sie nicht.)

Solange der IE9 nicht weit verbreitet ist, werden wir nicht in der Lage sein, Allzweck-Webseiten als application/xhtml+xml was erforderlich ist, damit der Browser echte XML-Parsing-Regeln verwendet. Bis dahin müssen Sie, wenn Sie XHTML-Dokumente schreiben, Ihre Dokumente auch rückwärtskompatibel mit einfachem HTML machen, was bedeutet siempre y nur unter Verwendung einer selbstschließenden Syntax für Elemente, die als mit einem EMPTY Inhaltsmodell. ( img , br , usw.)

Es gibt noch mehr Regeln, was man tun muss, um HTML-kompatibles XHTML zu schreiben, aber das ist die wichtigste. Anhang C des XHTML 1.0-Standards ist eine Liste der Unterschiede; sie sieht etwas kompliziert aus, aber viele der Punkte betreffen Funktionen, die Sie ohnehin nicht verwenden wollen, und einige sind jetzt irrelevant, da sie sich auf alte Browser wie Netscape 4 beziehen. Die Praxis, ein Leerzeichen vor /> wird zum Beispiel nicht mehr in allen gängigen Anwendungen benötigt.

Answer 2

Nach Angaben der HTML 4.01-Spezifikation , Abschnitt 7.5.4 die <div> Tag erfordert einen schließenden Tag.

Answer 3

<div class="clear"/>  

Diese Syntax ist kein gültiges HTML/XHTML. Jeder Tag, der puede Inhalte enthalten no puede selbstschließend sein (auch wenn kein Inhalt im Tag erforderlich ist). Daher können Tags, die Inhalte enthalten, wie div, span, p usw., niemals selbstschließende Tags sein. Umgekehrt können Tags, die keinen Inhalt enthalten, wie <br /> sollten immer selbstschließend sein.