CSS 3列浮动和负边距液体布局

Question

我在使用float和否定margin教授CSS布局时偶然发现了一些问题。

我想出了这个简单的语义HTML结构（首先是主要内容，之后是其他相对不太重要的内容）。

3列布局，两侧有2个固定宽度的列，中心有1个流体列。

HTML：

<div id="wrapper">
    <div id="main">main content</div>
    <div id="nav">navigation</div>
    <div id="extra">extra</div>
    <div id="footer">footer</div>
</div>

CSS：

#wrapper {
    margin: 0 120px 0 200px;
  }
  #main, #extra, #nav {
    float: left;
  }
  #main {
    width: 100%;
    background-color: red;
  }
  #nav {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: green;
    position: relative;
    left: -200px;
  }
  #extra {
    width: 120px;
    background-color: blue;
    margin-right: -120px;
  }
  #footer {
    clear: both;
    background-color: black;
    color: #fff;
  }

即使在IE8上，这种布局也能正常工作：）

http://codepen.io/nori2tae/pen/rFLJb?editors=110

但是，通过在div#extra上设置div#main，我不太明白为什么margin-right: -120px;坐在div#extra旁边。

但margin-left: -120px;不起作用......

有人可以解释为什么会这样吗？