是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></aside> 和 <article></article>），那就别用 column-count —— 它会把这两个区块也强行拆开。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 干扰了布局上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！