应使用语义化标签结合flexbox布局，因其更可靠、易维护；避免依赖过时的float或内联样式模板，而应按场景组织最小可运行单元，显式控制flex-shrink等关键细节。
直接用语义化标签 + Flexbox 写结构，比抄一堆 <div id="header"> 更可靠、更易维护。<h3>为什么别再存“万能 div 布局模板”</h3>
<p>你收藏的那些带 <code>id="container"、class="left-nav" 的 HTML 片段，多数基于 float 或内联 style，实际项目里一改尺寸就错位，一加响应式就崩。它们不是“模板”，是过期快照。
- float 布局必须配
clear: both或伪元素清除，漏写就塌陷 - 内联 style 无法复用，改颜色/宽度得每处手动搜
- 没语义的
<div> 堆砌让屏幕阅读器和 SEO 无从下手<li>移动端适配基本靠重写，不是加几行 <code>@media就能救回来 - 页头固定用
<header></header>，不写<div class="top-bar"><li>主内容区优先用 <code><main></main>，侧边栏用<aside></aside>，不是都塞进<div> <li>Flex 布局只在容器上写 <code>display: flex和方向，子项用flex或margin控制间距，不用设死width: 200px - 响应式切换只改
flex-direction或flex-basis，不删标签、不换结构
真正值得记录的布局代码长什么样
只记三类：语义骨架、Flex 容器声明、响应式断点逻辑。其余样式抽离到 CSS 文件里，HTML 只管“这是什么”，不管“它多宽多高”。
示例：一个可缩放的两栏布局（PC 横排，手机竖排）
<main class="layout-main"><aside class="layout-sidebar">导航</aside><article class="layout-content">正文</article></main>
.layout-main {
display: flex;
}
.layout-sidebar { flex: 0 0 240px; }
.layout-content { flex: 1; }
<p>@media (max-width: 768px) {
.layout-main { flex-direction: column; }
.layout-sidebar { order: 2; }
.layout-content { order: 1; }
}</p>
怎么组织你的 HTML 布局代码库
别建个“html-layouts.md”往里堆代码。按场景建最小可运行单元，每个单元含 HTML 片段 + 关键 CSS 声明 + 一行注释说明适用条件。
- 文件名用场景命名：
flex-2col-responsive.html、grid-card-grid.html，不用layout-v1.html - 每个文件顶部加注释：
<!-- PC: sidebar left, mobile: content first --> - 避免写完整页面（不带
），只存 body 内结构片段，方便粘贴即用 - 用
data-*属性标记行为，比如<nav data-collapsible="true"></nav>，后续 JS 可直接识别
最常被忽略的是语义层级和 Flex 子项的 flex-shrink 默认值——它会让内容超长时被压缩变形，而不是换行或溢出。真要稳定，得显式写 flex-shrink: 0 或 min-width: 0。这个细节，90% 的“模板”里都藏着坑。
