可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Ran into a problem on my web page where the footer in the master page wasn't displaying correctly for one particular page. On that page, I had a

<div style="clear:both" /> at the bottom.

After banging my head at it for a while, I saw that all I needed to change to get the footer to show up properly was to change that line to:

<div style="clear:both"></div>

I don't understand why writing it this way should produce a different result. Aren't they semantically equivalent? I checked and double-checked that this was the only change I made. Flipping back and forth between the two would change the behavior of the footer.

So my question is... are those not equivalent? What's the difference between them?

Edit: The odd part is, they both do what I want to the stuff above them in the page. I mean, in the self-closing div tag's case, if I remove it entirely the page definitely reacts, so it must be doing SOMETHING with it and not just ignoring it completely.

回答1:

<div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

回答2:

According to the HTML 4.01 spec, section 7.5.4 ("Grouping elements: the DIV and SPAN elements):

Start tag: required, End tag: required

So a self-closing <div> tag (like the first example you specified: <div />) is not valid.

回答3:

If I remember right - <div /> is invalid. Use <div></div> if you want it to work everywhere. The closing tag is required, so doing things like <div class="Clear" /> won't work.

All grouping elements will behave the same way. You'll see the same behavior with both DIV and SPAN.

EDIT: Found this link while looking at the link in the answer posted by @Donut - its a matrix that shows which elements have an optional closing tag requirement (among other things.) Looked interesting, so I thought I'd post it here to share with everyone else as well.

回答4:

It depends on the DOCTYPE that you're using.

For XHTML, which is XML, the two tags are equivalent. You would signal this to the browser by including one of the following DOCTYPEs as the first line in your page:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

For HTML 4.01, which is what all (?) browsers assume when there's no DOCTYPE, certain tags must be expressed as open-close. Most of the block-level tags require this, including such non-markup tags as <SCRIPT>. If you look at the WDG HTML documentation, you'll see whether a particular tag requires open-close or can be expressed as an empty tag, via the "syntax" item:

Syntax      <DIV>...</DIV>

回答5:

self terminating tags are valid in XML, but not in this case for HTML

回答6:

The first option is not valid html; the second is. <div /> really confuses IE, so always go for <div><div/>.

回答7:

You would not be able to put content in a "<div />".

回答8:

<div /> is valid depending upon your DOCTYPE It's valid 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

If you want to use a single tag and not have a useless empty <div> on the page, try using a <br /> for your clears.

<style type="text/css">
.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;
}
</style>

<br class="clear-fix" />

Some may question my usage of !important here; however, this is the reason why it exists! We know that when we clear something, we want it to do a specific task no matter what.

Take for example:

<style type="text/css">
    .hidden {display: none;}
    #foo {display: block;}
</style>

<p id="foo" class="hidden">You can still see me</p>

In this particular case, you would add !important to your hidden class, because it's pretty clear that it's supposed to hide stuff no matter what