<div /> versus <div></div>

programming web dev
1

I have a two-column box set up as such:


                <div class="box">
                    <div class="col-left">
                        <h3>One</h3>
                        <p>Two</p>
                        <h5>$6.25</h5>
                        <hr />

                        <h3>One</h3>
                        <p>Two</p>
                        <h5>$5.99</h5>
                        <hr />
                    </div>
                    <div class="col-right">
                        <h3>One</h3>
                        <p>Two</p>
                        <h5>$7.99</h5>
                        <hr />

                        <h3>One</h3>
                        <p>Two</p>
                        <h5>$7.99</h5>
                        <hr />
                    </div>
                    <div class="clear"></div>
                </div>

and CSS as such:


.box {
    margin: 0 0 20px 0;
    padding: 20px 10px;
    background: #fff;
    }
.box .col-left {
    position: relative;
    float: left;
    margin: 0;
    padding: 0 10px 0 0;
    width: 215px;
    border-right: 2px solid #eee;
}
.box .col-right {
    position: relative;
    margin: 0 0 0 235px;
    padding: 0;
    width: 220px;
}
.clear {
    clear: both;
}

Works fine, no problems. If I switch the clear divs to this:


<div class="clear" />

everything breaks.

Not a huge deal, but I’m curious. Can somebody explain it? (ditt0? ^_^)