<main>是HTML5中唯一标识页面核心内容的语义化容器，每页仅能使用一次，不可嵌套于header、footer、nav等元素内，不提供布局功能，其作用在于提升可访问性与SEO。
main 标签本身不提供分栏能力，它只是语义化容器。真正实现双列或多列布局的是 CSS 的 column-count、display: flex 或 display: grid —— 选哪个，取决于你要的是“内容流式分栏”还是“结构化区域划分”。
用 column-count 对 main 内容做流式分栏（适合长文本、列表）
这是唯一能直接让 main 里连续段落、li、p 等块级元素自动跨列分布的方式。浏览器按内容流顺序切分，不是按 DOM 结构分组。
- 必须给
main设明确的width，否则列宽无法计算，可能退化为单列 -
column-count: 2不保证每列项数相等——它按高度均衡分配，若某段文字特别长，一列可能只有 1 个p，另一列有 5 个 - 无法控制某个
h2必须独占一列，除非加break-before: column，但 IE 和旧 Safari 不支持 - 示例：
main { width: 800px; column-count: 2; column-gap: 2rem; } main p { break-inside: avoid; }其中break-inside: avoid防止段落被劈成两半
用 display: flex 或 display: grid 划分 main 的子区域（适合侧边栏+主内容）
如果你的 main 里本来就有两个逻辑区块（比如 <aside> 和 <article>），那就别用 column-count —— 它会把这两个区块也强行拆开。
-
flex更适合动态宽度场景：main { display: flex; gap: 1.5rem; } aside { flex: 0 0 260px; } article { flex: 1; } -
grid更适合固定轨道或复杂对齐：main { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; } aside { grid-column: 1; } article { grid-column: 2; } - 两者都要求子元素是直接子节点；如果中间嵌了
div包裹层，得把display: flex移到那层上 - 别在
main上同时写column-count和display: flex——后者会完全覆盖前者，开发者工具里能看到column-count被标记为invalid
为什么不能只靠 main 标签实现分栏？
main 是语义标签，和 div 一样默认是 display: block，没有内置布局逻辑。它的作用是告诉辅助技术“这是页面主体”，而不是告诉浏览器“请帮我分两列”。所有分栏行为都来自你显式写的 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
- 搜索引擎和读屏器不关心你用的是
flex还是grid，只关心结构是否合理（比如aside在main内是否语义恰当） - 如果为了 SEO 或可访问性硬套
main，又在里面塞table或大量float，反而破坏语义一致性 - 移动端适配时，
column-count在小屏下容易产生过窄列导致文字挤成一团，而flex/grid可以用媒体查询轻松切回单列
最常被忽略的一点：分栏效果是否生效，第一眼就该看 computed styles 里 display 值是不是你预期的，而不是只盯着 HTML 标签名。很多问题根本不在 main，而在父容器的 overflow: hidden 或子元素的 float 干扰了布局上下文。
