爲什麼相對定位的元素忽略浮動元素

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元素的定位不可見的，因此它需要下一個更高的元素的大小 - 容器，這兩個左/右框是