Html 为什么浮动元素与下面的元素重叠，而不是相反？

div{
背景色：#00FFFF；
}
p{
宽度：50px；
高度：50px；
边框：1px纯黑；
边际：0px；
}
#p1{
背景色：红色；
浮动：左；
}
#p2{
背景颜色：绿色；
}
#p3{
背景颜色：橙色；
}
#p4{
背景颜色：黄色；
}
跨度{
位置：相对位置；
}
#s1{
顶部：1px；
左：1px；
}
#s2{
顶部：2个；
左：2px；
}
#s3{
顶部：3px；
左：3px；
}
#s4{
顶部：4px；
左：4px；
}

浮动元素
A
B
C
D
这是在段落框后继续的常规内容。

来自MDN

对于浮动块，堆叠顺序略有不同。浮动块放置在未定位块和定位块之间

它还进一步说

如果未定位块（

#p2

在您的示例中）的不透明度降低，则会发生奇怪的情况：该块的背景和边框会在浮动块上方弹出，但仍在定位块下方

来自MDN的

对于浮动块，堆叠顺序略有不同。浮动块放置在未定位块和定位块之间

它还进一步说

如果未定位块（

#p2

在您的示例中）的不透明度降低，则会发生奇怪的情况：该块的背景和边框会在浮动块上方弹出，但仍在定位块下方

为什么会这样

因为这就是float的工作原理

当您将

float

放在一个元素上时，实际上并不是说该元素本身应该如何显示，而是说下面的内容应该如何围绕它流动

更准确地说，下面是内联内容

由于您的段落是块元素，并且您还将其宽度和高度固定为50px，因此您得到的结果是：

\p2

段落的内联内容确实围绕

\p1

段落流动；但父段落的宽度和高度限制不允许父段落相应地增长

---

编辑：
如果你对我想说的话有困难，请考虑以下更简单的例子：

#浮动{
浮动：左；
宽度：50px；
高度：50px；
边框：1px纯红；
}
#无贷款{
边框：1px纯蓝色；
背景：绿色；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。

为什么会这样

因为这就是float的工作原理

当您将

float

放在一个元素上时，实际上并不是说该元素本身应该如何显示，而是说下面的内容应该如何围绕它流动

更准确地说，下面是内联内容

由于您的段落是块元素，并且您还将其宽度和高度固定为50px，因此您得到的结果是：

\p2

段落的内联内容确实围绕

\p1

段落流动；但父段落的宽度和高度限制不允许父段落相应地增长

---

编辑：
如果你对我想说的话有困难，请考虑以下更简单的例子：

#浮动{
浮动：左；
宽度：50px；
高度：50px；
边框：1px纯红；
}
#无贷款{
边框：1px纯蓝色；
背景：绿色；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到了电子排版，基本上保持不变。

在浮动元素之后，需要使用

清除补丁，例如：

浮动元素之后的元素将围绕它流动。为了避免这种情况,，
使用clear属性



div{
背景色：#00FFFF；
}
p{
宽度：50px；
高度：50px；
边框：1px纯黑；
边际：0px；
}
#p1{
背景色：红色；
浮动：左；
}
#p2{
背景颜色：绿色；
}
#p3{
背景颜色：橙色；
}
#p4{
背景颜色：黄色；
}
跨度{
位置：相对位置；
}
#s1{
顶部：1px；
左：1px；
}
#s2{
顶部：2个；
左：2px；
}
#s3{
顶部：3px；
左：3px；
}
#s4{
顶部：4px；
左：4px；
}
.clear{clear:both；}
浮动元素
A
B
C
D
这是在段落框后继续的常规内容。
您需要在浮动元素之后使用
清除修复
，例如：

浮动元素之后的元素将围绕它流动。为了避免这种情况,，
使用clear属性



div{
背景色：#00FFFF；
}
p{
宽度：50px；
高度：50px；
边框：1px纯黑；
边际：0px；
}
#p1{
背景色：红色；
浮动：左；
}
#p2{
背景颜色：绿色；
}
#p3{
背景颜色：橙色；
}
#p4{
背景颜色：黄色；
}
跨度{
位置：相对位置；
}
#s1{
顶部：1px；
左：1px；
}
#s2{
顶部：2个；
左：2px；
}
#s3{
顶部：3px；
左：3px；
}
#s4{
顶部：4px；
左：4px；
}
.clear{clear:both；}
浮动元素
A
B
C
D
这是在段落框后继续的常规内容。
失去浮动：左；在#p1{}上，添加一个位置：r