section和article嵌套时结构变乱该怎么处理？

Newb.增芳提问于 2026-02-11 01:56:24 阅读 28

前端

在用HTML5语义标签做博客页面时遇到问题，用了section包裹article标签，但布局完全乱了：


<section>
  <article>
    <header>文章标题</header>
    文章内容...
    <footer>作者信息</footer>
  </article>
</section>

原本打算用flex布局让侧边栏和主体并排显示，但发现article的高度计算不对，内容溢出到外面了。之前用div的时候没问题，是不是我嵌套方式不对？还是需要给语义标签加特殊样式？要不要放弃section直接用div套article？

HTML HTML5语义化 Web API

我来解答赞 11 收藏

反馈

1 条解答

明璨~ Lv1

语义标签本身不会破坏布局，问题出在 flex 容器的默认行为上。section 和 article 都是块级元素，嵌套没问题，不用退回到 div。

你遇到的是 flex 项目（article）没有被正确约束高度导致的溢出。建议改成给父容器设 flex 并控制子项的 flex 属性。

把外层 section 设为 flex 容器，确保 article 不拉伸溢出：

.container {

  display: flex;

}



article {

  flex: 1; /* 自适应剩余空间 */

  min-width: 0; /* 防止内容撑开溢出，关键 */

}

同时检查 article 是否有固定高度或者父级没设高度限制。如果主体区域需要随内容自适应，别忘了给 html/body 设置 height: 100% 或使用 min-height。

语义结构保留完全没问题，<section><article> 这种写法在博客列表页很常见，关键是用 CSS 控制好 flex 行为，加上 min-width: 0 能解决大多数内容溢出问题。

2026-02-11 04:03