Css 为什么相对定位的元素会忽略浮动的元素

当静态块元素跟随浮动元素时，它将填充剩余的可用空间

例如，

.right

的宽度为80%：

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
}

但是，当带有

position:relative

的块元素跟随浮动元素时，浮动元素似乎被忽略，并且相对元素的宽度为100%：

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
    position: relative;
}

根据W3C“一旦一个箱子按照正常流量布置或浮动，它可能会相对于该位置移动”

---

因此，如果我不更改元素的

左

或

右

位置，为什么它会将自己设置在其父元素的最左边，而不是保持在正常的流中？

位置：relative

指的是如果没有CSS定位覆盖，元素将处于的位置-例如，其自然不变的位置

---

浮动元素基本上从文档定位计算中删除，因此

left

元素对于

right

元素的定位是不可见的，因此它采用下一个更高元素的大小—这两个左/右框所在的容器

“为什么它会将自己设置在父元素的最左边，而不是保持在正常流程中？”这是您的答案。@RokoC.Buljan这是一个公平的观点，我将更改标题以更好地反映我的问题实际是什么+1谢谢，原因将在