[css] float 浮动不上去？

自从用了display:flex之后，就不太用float，最近在写一个样式的时候偶然用到了float，但没想到整了一个大乌龙。

目标样式是：右边固定宽度，左边宽度自适应

于是写下如下代码：

    <div class="wrap">
      <div class="left"></div>
      <div class='right'></div>
    </div>

    .wrap {
      width: 500px;
      border: black 1px solid;
      position:absolute;
    }
    .right {
      float: right; 
      width: 100px;
      height: 100px;
      background: red;
    }
    .left {
      height: 100px;
      margin-right: 100px;
      background: yellow;
    }

得到结果并不对

又尝试调整了一下宽度和margin-right和父元素的定位方式之后仍然不对，所以我的脑子中充斥着 '怎么float不上去呢',一度时期怀疑float是不是变了。

直到。。。我发现被浮动的是right，left独占一行，right就算脱离文档流也和left没关系，所以正确的写法就是换一下样式或者标签顺序就可以完成目标样式。