在Web前端开发中，两栏布局是最常见的页面骨架之一。传统做法往往直接使用两个<div>元素，配合float或者绝对定位来分出左右区域。这种方式虽然能快速达到视觉效果，但文档结构中丢失了内容之间的逻辑关系，搜索引擎和辅助技术都无法判断哪一侧是核心内容、哪一侧是辅助信息。语义化两栏布局的核心思路是：先用正确的HTML标签表达内容的主次与从属，再使用CSS实现并排显示。
使用main与aside搭建语义骨架
语义化两栏布局的第一步是选对标签。主体内容应当放在<main>元素内，它代表页面中独一无二的核心区域；而右侧或左侧的补充说明、广告、相关链接等，应当使用<aside>元素。<aside>的语义就是“与周围内容间接相关但可以独立存在”的区块，非常适合做侧边栏。如果左侧是导航，还可以用<nav>替代<aside>。
下面是一个基础结构示例，我们用<main>包裹文章主体，用<aside>包裹作者信息与推荐阅读。注意这里完全没有为了布局而额外增加无语义的<div>，所有外层标签都在表达含义。这种写法让文档在禁用CSS时依然有清晰阅读顺序：先读主体，再读侧栏。
<body>
<header>
<h1>站点标题</h1>
</header>
<div class="layout">
<main>
<article>
<h2>文章标题</h2>
<p>这里是文章正文内容，占据左侧主栏。</p>
</article>
<main>
<aside>
<section>
<h3>关于作者</h3>
<p>作者介绍文字。</p>
</section>
<section>
<h3>推荐阅读</h3>
<ul><li>链接一</li><li>链接二</li></ul>
</section>
</aside>
</div>
</body>
上述代码中唯一的<div class="layout">是为了CSS布局方便而保留的容器，但它不承载语义，只是布局钩子。如果你使用CSS Grid，甚至可以把这个容器去掉，直接对<body>或<header>的父级做网格定义。相比之下，滥用<div>包裹一切的做法会让HTML变成没有地标的大平原，而语义标签则像明确了功能的建筑物。
用flex实现自适应两栏排列
在语义结构就绪后，CSS负责将<main>和<aside>并排。Flex布局是最直观的方案：把容器设为display:flex，主区域设flex:1占满剩余空间，侧栏设固定宽度。这样无论视口如何变化，两栏都不会错位，且主体始终优先获得空间。
以下样式将.layout变为横向弹性容器，并让<aside>固定为280px，<main>自动填满左侧。当屏幕低于768px时，通过媒体查询改为纵向堆叠，侧栏移到主体下方，符合移动端阅读习惯。整个过程没有用到float，也不会产生清除浮动之类的历史包袱。
.layout {
display: flex;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
main {
flex: 1;
min-width: 0;
}
aside {
width: 280px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.layout {
flex-direction: column;
}
aside {
width: 100%;
}
}
flex方案的优势在于对齐简单、顺序可控。如果你想让侧栏在DOM中靠前但视觉上在右，只需给<aside>加order属性即可，不需要改动HTML顺序，这也保护了语义阅读流。如果项目需要兼容非常老的IE，才需要考虑float回退，但现代开发环境已基本不需要。
语义化与可访问性及SEO的关系
采用<main>、<aside>等标签不仅仅是“写法优雅”，它直接影响辅助技术。屏幕阅读器允许用户跳过导航直接读<main>，而<aside>里的内容通常被标记为补充材料，用户可选择性收听。如果全部用<div class="sidebar">，读屏软件只能按顺序朗读，用户无法快速定位核心。
从SEO角度看，搜索引擎爬虫会赋予<main>内文本更高权重，并识别<aside>为次要信息，避免侧栏广告稀释主体关键词。一项常见对比是：同样内容的页面，语义结构清晰的版本在长尾词排名上往往优于div堆积版，因为爬虫能更准确提取主题。
此外，语义化两栏布局降低了团队协作成本。新成员看到<aside>就知道那是边栏，看到<main>就知道不能把全局导航塞进去。这种自解释性减少了注释和文档依赖，也让后期重构时不容易误删关键区域。综合来看，用对标签加flex布局，是兼顾效果、可访问性与维护性的务实选择。