Html 为什么块格式上下文元素的左边距不能得到与浮点元素右边距相同的结果？

这是我的密码：

.wrapper{
边框：1px红色虚线；
溢出：自动；
/*净浮动*/
}
.左{
宽度：120px；
边框：5px实心#ddd；
浮动：左；
右边距：20px；
}
.对{
边框：5px实心#ddd；
溢出：自动；
/*使右分区成为新的BFC*/
}

这是一个浮动div，宽度为120px。
这是一个div。

文件上说：

当您将元素向左浮动时，元素将从文档的正常流中取出（尽管仍然是文档的剩余部分）。它将向左或向右移动，直到它接触到其包含框的边缘或另一个浮动元素

因此，如果正确的元素宽度为100px

浮动元素出现在它之后，如果你给它的余量低于100px（例如20px），它将不采取任何行动，因为它已经离这一点足够远了，但如果你给它200px，它将采取行动

.wrapper{
边框：1px红色虚线；
溢出：自动；
/*净浮动*/
}
.左{
宽度：120px；
边框：5px实心#ddd；
浮动：左；
右边距：20px；
}
.包装工：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.对{
边框：5px实心#ddd；
溢出：自动；
/*使右分区成为新的BFC*/
左边距：200px；规范的相关部分说明：

表的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而非“可见”的元素）在与元素本身相同的块格式上下文中，任何浮动的边距框不得重叠。如有必要，实现应通过将所述元素放置在任何先前浮动的下方来清除所述元素，但如果有足够的空间，则可将其放置在此类浮动的旁边。它们甚至可能使所述元素的边距框比定义的边距框窄根据第10.3.3节的规定，CSS2未定义UA何时可以将所述元件放置在浮子旁边，或所述元件的变窄程度

这让浏览器在实际操作中有了一定的自由度，但关键是，如果他们将BFC放置在浮点旁边，BFC的边框框不能与浮点的边距框重叠。因此更改BFC上边距的大小不会影响该约束，而是更改mar的大小浮点数上的gin将。
你能提供一张图片吗？这样我们可以更好地理解。这是什么BFC？BFC意味着块格式上下文。你为什么不使用flex而不是float？只是说它更灵活。这是一条新规则：“BFC的边框框不能与浮动元素的边框框重叠。”为什么在前端有这么多小的规则要记住？难道不能像“牛顿运动定律”那样吗"，只有三条定律可以解释力和运动之间的关系。为什么在前端有那么多小规则需要记住？-->不需要记住它们。你面对它们，你会感到惊讶，你理解它们，你会与它们一起工作。你不知道下一步你会发现多少小规则…@TemaniAfif但如果我不知道它们的深层含义，你会发现它们在这些小规则的背后，我想我可能很容易忘记它们。不，这不是一个新规则。从那时起，它就一直在CSS 2.1规范中。