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

我有以下内容，其中

a

和

b

div块分别位于左侧和右侧

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

一切都会好起来的。

---

但是为什么没有

清除：两个
都是这样的呢？
试着制作容器

Position:relative;

以及里面的元素

Position:absolute;

这是因为
float:left
属性

默认显示模式为
块
。因此，在新的一行中，div将紧随其后。但由于您已将
float:left
设置为
#a
。div从正常流中获取，忽略了相对于其他元素的#a位置，因此它重叠。
实际上，d块没有重叠c。
这是a块与c重叠的部分

这是因为a和b都是浮动的，浏览器看到它们的计算高度为0px，这意味着c、d、e、f都会在页面上向上移动，并且因为a首先出现在DOM中，它位于c的顶部。
整个问题是浮动对象不会增加它们所在对象的高度。为什么不为d区添加类？
Position:absolute;