浮动定位之三列布局问题与发现上

理想的三列布局效果应该是这样的

但是现实中的情况是aside侧边栏跑到下一列的右边去了。

HTML源代码如下：

<div id="root">
    <header></header>
    <nav></nav>
    <main></main>
    <aside></aside>
    <footer></footer>
</div>

CSS源代码如下：

#root {
    padding: 20px;
    background: lightblue;
}

header {
    height: 80px;
    width: 100%;
    border: 1px solid #aaaaaa;
    margin-bottom: 20px;
    background: white;
}

nav {
    width: 20%;
    height: 100%;
    float: left;
    border: 1px solid #aaaaaa;
    background: white;
    background: white;
}

main {
    width: auto;
    height: 100%;
    border: 1px solid #aaaaaa;
    margin-left: 25%;
    margin-right: 25%;
    background: white;
}

aside {
    width: 20%;
    height: 100%;
    float: right;
    border: 1px solid #aaaaaa;
    background: white;
}

footer {
    height: 80px;
    width: 100%;
    border: 1px solid #aaaaaa;
    margin-top: 20px;
    background: white;
}

错误发生在HTML中aside的安放位置，我们将aside安置在main之后，正确的做法是将aside放置在main之前。

<div id="root">
    <header></header>
    <nav></nav>
    <aside></aside>
    <main></main>
    <footer></footer>
</div>

为什么调换了位置就好了呢？背后的原理是什么呢？
参考 浮动定位之三列布局（下）https://segmentfault.com/a/11…