从“套娃 div”到“语义 Grid”：多列布局的逃生路线

早期网页就像用纸箱拼家具，全是 <div id="left">、<div id="right">，能住但丑；后来 HTML5 送来语义乐高，再配合 Flexbox/Grid，才算真正精装。三条路线给你画好：

1. div 浮动——老派纸箱

   <div id="header">…</div>
   <div id="nav" style="float:left;width:20%">…</div>
   <div id="content" style="float:left;width:80%">…</div>
   <div id="footer" style="clear:both">…</div>

   float + 百分比宽度曾是“圣杯”，但一碰手机屏就散架，维护还得数像素。

2. 语义标签——升级乐高

   <header>…</header>
   <nav>…</nav>
   <section>…</section>
   <footer>…</footer>

   标签自带含义，SEO 和读屏器秒懂；样式还是靠 CSS，不过代码瞬间清爽。

3. 现代 CSS——精装神器

4. Flexbox：一维排列，导航、按钮组利器

   .nav { display:flex; justify-content:space-between; }

5. Grid：二维布局，多列、多栏、自适应一次搞定

   .layout {
     display: grid;
     grid-template-columns: 200px 1fr 200px;
     gap: 20px;
   }

   不用算百分比，也不用 clearfix，一句话重新排布。

6. table 布局——别翻老黄历

   <table><tr><td>左边</td><td>右边</td></tr></table>

   除了邮件模板，谁用谁被同事翻白眼：语义错、响应差、改行高像拆炸弹。

一句话总结：
新作品直接上“语义标签 + Grid/Flex”，老项目慢慢拆 div；table 布局留在 2009 年，别再拖出来遛弯。