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

Question

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

因此，例如.right的宽度为80％：

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

.right {
    background-color: blue;
}

http://jsfiddle.net/yryZR/

但是，当position: relative的块元素跟随浮动元素时，浮动元素似乎被忽略，相对元素占用100％宽度：

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

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

http://jsfiddle.net/yryZR/1/

根据W3C “一旦根据正常流量布置了一个方框或浮动，它可能会相对于此位置移位”(source)

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

Answer 1

position:relative指的是没有CSS定位覆盖的元素所处的位置 - 例如它的天然未改变的位置。

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