Html CSS中元素顺序对浮动的影响

我有一个简单的HTML：

这是CSS：

.square{
高度：50px；
宽度：50px；
}
#黑色的{
背景色：黑色；
浮动：左；
}
#黄色的{
背景颜色：黄色；
}

据我所知，当元素浮动时，它会从页面流中移除。这就好像浮动元素和非浮动元素互相忽略一样。因此，黑色方块正好位于黄色方块的顶部并将其隐藏：

但当浮动黄色方块时：

#黑色{
背景色：黑色；
}
#黄色的{
背景颜色：黄色；
浮动：左；
}

我们得到：

我正试图弄明白这背后的逻辑。 html中的元素排序和浮动机制如何一起使用？什么时候谁赢？

事实上，这个问题的答案很好

浮动是在当前行上向左或向右移动的框。。。由于浮动不在流中，因此在浮动框之前和之后创建的未定位块框垂直流动，就好像浮动不存在一样

这解释了为什么在第一个示例中，float覆盖了黄色框

---

对于第二个示例，

#black

在内容流中，并且是

display:block

，因此有自己的行<代码>#黄色在这种情况下是另一行。

那么关于W3C的这句话，为什么黄色框没有像第一个例子中那样覆盖黑色？@YaronLevi黄色框在下一行，因为黑色框是

display:block