Why does my div overlap the other div in my code?

Question

I have the following code, where a and b div blocks are on left and right side respectively.

<!--HTML-->
<div style="background-color:#125467" id="a">a</div>
<div style="background-color:#AABBFF" id="b">b</div>
<div style="background-color:#990033" id="c">c</div>
<div style="background-color:#885544" id="d">d</div>
<div style="background-color:#7799BB" id="e">e</div>
<div style="background-color:#33FF88" id="f">f</div>
<div style="background-color:brown" id="g">g</div>
<div style="background-color:blue" id="h">h</div

/*CSS*/
div {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    font-size: 20px;
}
* {
    border: 1px black dashed
}

#a {
    float:left;
}

#b {
    float:right;
}

The problem is that I don't understand why d block overlaps c block like on the following picture:

but other blocks go normally. I know that if I add

#c {
    clear: both;
}

everything will be ok.

But why without clear:both it behaves in such way?

Answer 1

Actually, the d block is not overlapping c. It's the a block that's overlapping c.

This happens because both a and b are float'ed and the browsers sees them with a computed height of 0px meaning that c, d, e, f all move up the page, and because a appears first in the DOM it sits on top of c.