Gibt es einen Unterschied zwischen <div /> und <div></div>?

Question

Ich bin auf ein Problem auf meiner Webseite gestoßen, bei dem der Footer auf der Master-Seite für eine bestimmte Seite nicht richtig angezeigt wurde. Auf dieser Seite hatte ich eine

am Ende.

Nachdem ich eine Weile überlegt hatte, sah ich, dass ich nur diese Zeile ändern musste, um den Footer richtig anzeigen zu lassen:

Ich verstehe nicht, warum es einen Unterschied machen sollte, es auf diese Weise zu schreiben. Sind sie nicht semantisch äquivalent? Ich habe überprüft und doppelt überprüft, dass dies die einzige Änderung war, die ich vorgenommen habe. Das Hin- und Herschalten zwischen den beiden änderte das Verhalten des Footers.

Also frage ich mich... sind sie nicht äquivalent? Was ist der Unterschied zwischen ihnen?

Bearbeitet: Das Seltsame ist, dass sie beide das tun, was ich mit dem darüber liegenden Inhalt möchte. Ich meine, im Fall des selbstschließenden div-Tags, wenn ich ihn komplett entferne, reagiert die Seite definitiv, also muss er IRGENDWAS damit tun und es nicht einfach komplett ignorieren.

Answer 1

Die erste Option ist kein gültiges HTML; die zweite ist es.

verwirrt wirklich den IE, also immer

verwenden.

Answer 2

Sie würden keinen Inhalt in ein "

" einfügen können.

Answer 3

Ist je nach Ihrem DOCTYPE gültig. Es ist gültiges XHTML Transitional & XHTML Strict

DEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm

VALIDATION: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Wenn Sie ein einzelnes Tag verwenden möchten und keine nutzlose leere

auf der Seite haben möchten, versuchen Sie,für das Clearing zu verwenden.

.clear-fix {
    float: none !important;
    height: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

Einige mögen meinen Einsatz von !important hier in Frage stellen; jedoch ist dies der Grund, warum es existiert! Wir wissen, dass wenn wir etwas klären, wollen wir, dass es eine spezifische Aufgabe unabhängig davon erledigt.

Nehmen Sie zum Beispiel:

    .hidden {display: none;}
    #foo {display: block;}

Sie können mich immer noch sehen

In diesem speziellen Fall würden Sie Ihrem hidden-Klasse !important hinzufügen, weil es ziemlich klar ist, dass es Dinge unabhängig davon verbergen soll.