html - 为什么我的 div 与代码中的另一个 div 重叠？

Question

我有以下 code ，其中 a 和 b div block 分别位​​于左侧和右侧。

<!--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;
}

问题是我不明白为什么 d block 与 c block 重叠，如下图所示:

但其他方 block 正常。我知道如果我添加

#c {
    clear: both;
}

一切都会好起来的。

但为什么没有 clear:both 它会以这种方式运行？

Answer 1

实际上，d block 并没有与c重叠。 它是与 c 重叠的 a block 。

发生这种情况是因为 a 和 b 都是 float 并且浏览器看到它们的计算高度为 0px，这意味着 c、d、e、f 都向上移动了页面，并且因为 a首先出现在 DOM 中，它位于 c 之上。