HTML代码如下：

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

nav，aside分别左浮动和右浮动，main是块级元素。
注意，浮动元素脱离了文档流，块级元素独占一行。
将aside放置在main之后的后果就是main所在的那一行已经被main独占了，aside只能顺流到下一行，并在下一行往右浮动。
将<nav>放置在main之前，由于<nav>脱离了文档流，不占据空间，所以<main>占据了<nav>所在的那一行。

关于浮动的半脱离文档流的理解：https://www.cnblogs.com/xcjsj…