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

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