HTML5流布局是一種非常流行的頁面布局方式，它基于CSS3的彈性盒子布局模型，可以在不同尺寸的設備上實現自適應的效果。下面是一個基本實現HTML5流布局的代碼：

<div class="container">
<header>
<h1>HTML5流布局</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
<section class="main">
<article>
<h2>什么是HTML5流布局？</h2>
<p>HTML5流布局是一種基于CSS3彈性盒子布局模型的頁面布局方式，可以實現頁面自適應的效果。</p>
</article>
<article>
<h2>如何實現HTML5流布局？</h2>
<p>實現HTML5流布局需要使用CSS3的彈性盒子布局模型，通過設置容器元素的display屬性為flex或inline-flex即可。</p>
</article>
</section>
<aside class="sidebar">
<h3>目錄</h3>
<ul>
<li><a href="#">什么是HTML5流布局？</a></li>
<li><a href="#">如何實現HTML5流布局？</a></li>
<li><a href="#">HTML5流布局的優缺點</a></li>
</ul>
</aside>
<footer>
<p>? 2021 HTML5流布局. All Rights Reserved.</p>
</footer>
</div>

在上面的代碼中，我們使用了<div>元素作為容器元素，其中包含了<header>、<nav>、<section>、<aside>和<footer>等5個模塊。其中，<header>模塊用于顯示網站的標題，<nav>模塊用于顯示網站的菜單欄，<section>模塊用于顯示網站的主要內容，<aside>模塊用于顯示網站的目錄，<footer>模塊用于顯示網站的底部信息。

在CSS樣式中，我們將容器元素的display屬性設置為flex或inline-flex，表示將容器元素作為彈性盒子進行布局；將不同模塊的寬度、高度、間距等屬性進行設置，使其在不同設備尺寸下都能夠呈現出合適的布局效果。