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

Question

我有以下code，其中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;
}

问题是，我不明白为什么d阻止重叠c阻止，如下图所示：

但其他街区正常。我知道如果我添加

#c {
    clear: both;
}

一切都会好的。

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

Answer 1

实际上，d块不重叠c。 这是一个与c重叠的块。

这是因为a和b都是#!/usr/bin/python # -*- coding: iso-8859-1 -*- '并且浏览器看到它们的计算高度为0px意味着c，d，e，f都向上移动页面，并且因为a首先出现在它位于c。

之上的DOM

Answer 2

这是因为float: left属性

默认显示模式为block。因此div将在新的一行中紧接着。但是因为你已经将float: left设置为#a。div从正常流程中取出，忽略了相对于其他元素的#a位置，因此它重叠。

Answer 3

尝试制作容器

Position:relative;

及其中的元素

Position:absolute;