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

Question

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

因此，例如.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 “一旦一个盒子按照正常流程布局或浮动，它可能会相对于这个位置移动” （来源）

因此，如果我不更改元素的leftorright位置，为什么它将自己设置在其父元素的最左侧而不是保持正常流程？

score 3 · Accepted Answer

position:relative指的是如果没有 CSS 定位覆盖，元素将处于的位置 - 例如其自然未改变的位置。

浮动元素基本上从文档定位计算中删除，因此您的left元素对于元素的定位是不可见right的，因此它采用下一个更高元素的大小 - 这两个左/右框所在的容器。

1 回答 1