浮动小例: 标签先后顺序 影响浮动

我们知道 前端都是分为 html css JavaScript，这是因为 他们各自都有不同的 书写语法，

但是 随着悠久的网络发展史， 个人觉得 它们的内部早就已经产生千丝万缕的“勾结”，

比如这个例子：

<!-- html -->
  <div class="wrap">
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <main>main</main>
  </div>

/* css */
.wrap {
  width: calc(50%);
  height: 500px;
  background: #ddd;
}
.left {
  width: calc(15%);
  height: calc(20%);
  background: red;
  float: left;
}
.right {
  width: calc(15%);
  height: calc(30%);
  background: green;
  float: right;
}
main {
  min-width: 200px;
  margin: 0 calc( 15.8%);
  height: calc(70%);
  background: orange;
}

他呈现的画面是：

Snipaste_2019-10-26_09-53-02.png

而 只要在上面代码 调换一下 .right 和 main 的 位置，css不变 如：

<!-- html -->
  <div class="wrap">
    <aside class="left">left</aside>
    <main>main</main>
    <aside class="right">right</aside>
  </div>

就会呈现下面这种情况：

Snipaste_2019-10-26_09-52-45.png

这是为什么呢？！