5种CSS方式实现三栏布局

转自：微点阅读（www.weidianyuedu.com）微点阅读 - 范文大全 - 免费学习网站

在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。

三栏布局

从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。假设左右宽度是 100px，header 和 footer 的高度是 60px。

下面介绍五种方式，分别是：浮动、绝对定位、flex-box 和 grid-box 和表格布局。

HTML 骨架如下：

<main>    <header>header</header>    <article>        <section class="left">left</section>        <section class="center">center</section>        <section class="right">right</section>    </article>    <footer>footer</footer></main>

浮动布局

使用浮动需要把 HTML 骨架调整一下，将三个 section</