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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。