现代网页布局核心是语义化html+flex/grid分层控制，html结构错误会导致css失效；需正确嵌套header、nav、main、aside、footer，避免冗余嵌套；flex外层用column控制垂直流，内层用row分栏；grid适合复杂二维布局，简单结构优先flex；ie11不支持grid需降级；长文本需加min-width:0防撑破。

现代网页布局不靠 float、不用 <table> 做主结构，核心是语义化 HTML + <code>display: flex 或 display: grid 分层控制——但前提是 HTML 结构本身没写错，否则 CSS 再精准也压不住错位、塌陷和响应失效。

HTML 语义结构写错，Flex/Grid 就是无效操作

很多页面 footer 不贴底、main 被挤到侧边栏下面、nav 在 header 外面浮动，根本原因不是 CSS 没加 flex，而是 HTML 标签用错了位置或嵌套混乱。

• <header></header> 只该包站点标识和主标题，导航菜单必须放进 <nav></nav>，且 <nav></nav> 应与 <header></header> 并列，不是它的子元素
• <main></main> 必须全局唯一，不能嵌套在另一个 <div class="container"> 里——它本身就是语义化的“主体容器” <li> <code><aside></aside> 表示与当前内容相关但非核心的辅助信息（如文章页的“相关推荐”），不是全站通用的广告栏；全站侧边栏应放在 直接子级，与 <main></main> 同级
• 避免三层以上无意义嵌套：<div><div><section><p>…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section></div></div> → 直接 <section><p>…</p></section>

Flex 布局必须分层设容器，不能只靠一个 display: flex

把 display: flex 直接加在 上，会导致 <header></header> 和 <footer></footer> 被拉伸、高度失控，因为它们默认会跟随 flex 容器的 align-items: stretch 行为。

• 外层用 flex-direction: column 控制垂直流向：.page { display: flex; flex-direction: column; min-height: 100vh; }
• <main></main> 单独设为 flex 容器实现左右分栏：main { display: flex; flex: 1; }
• 侧边栏固定宽、内容区自适应：aside { width: 240px; } + section { flex: 1; }（不用 flex: 1 1 auto，默认值已足够）
• 如果旧代码残留 float，务必对父容器加 overflow: hidden 或 display: flow-root，否则 flex 子项可能被 float 元素干扰

Grid 适合二维复杂划分，但别一上来就写 grid-template-areas

grid-template-areas 看起来直观，实际维护成本高：改一个区域名，所有 grid-area、grid-template-areas 字符串都要同步更新；也无法动态插入新区域。

• 三栏布局优先用线性定义：grid-template-columns: 240px 1fr 320px，清晰且方便后续加 @media 调整
• Grid 容器内子元素默认不继承 text-align，居中需显式写：justify-self: center 或 place-self: center
• IE11 不支持 Grid（哪怕加前缀），若需兼容，fallback 方案只能是 Flex 或 float，不能指望 Grid 自动降级
• Grid 真正优势在于行列同时控制，比如仪表盘、杂志式首页；简单上下结构（header-main-footer）用 Flex 更轻量、更可控

最易被忽略的点：Flex 子元素含长文本或 URL 时，默认不截断，flex: 1 会撑破容器——必须加 min-width: 0 才能触发 overflow: hidden 生效。这点在响应式断点切换时尤其关键，但几乎没人主动写。