HTML布局方式有哪些常见类型？

本文共计645个文字，预计阅读时间需要3分钟。

适用于以下线性排列场景，控制逻辑清晰，响应式适配成本低。

• 父容器必须设 display: flex，否则子元素上写 flex: 1 或 justify-content 全无效
• flex-direction: column 在移动端首屏堆叠时比 row 更自然
• 侧边栏固定宽 + 主内容自适应？写成 sidebar { flex: 0 0 240px; } + main { flex: 1; }
• 含长文本或 URL 的子元素容易撑破容器，加 min-width: 0 才能触发 overflow: hidden

用 display: grid 做二维区域划分

适合仪表盘、杂志式多模块、带固定头部/侧边+滚动内容区等需要行列精确定位的场景。

• 别一上来就用 grid-template-areas，命名区域维护成本高，改一个名字全得同步；优先用 grid-template-columns: 240px 1fr 320px 这类线性定义
• gap（或 grid-gap）比手动给子元素加 margin 更安全，避免 margin 合并问题
• 子元素默认不继承父级 text-align，居中需单独设 justify-self: center 或 place-self: center
• IE11 完全不支持 grid（前缀也无效），若需兼容，得 fallback 到 flex 或 float

为什么不能用 <table> 或 float 做主布局

<table> 的语义是呈现表格化数据，不是排版工具；float 本质是让元素脱离文档流，必须配合 clear 防止塌陷，且无法解决垂直居中、等高、响应式重排等现代需求。

• 用 <table> 布局时，屏幕阅读器会按表格逻辑读取，破坏可访问性结构
• float 在 Flex/Grid 普及后已退为“局部微调手段”，比如文字环绕图片，而非整页结构
• 所有现代 CSS 布局都依赖父容器开启对应上下文（flex / grid），而 float 是对单个元素施加副作用，不可控性高

真正难的不是选哪种方式，而是理解「布局能力由父容器决定」——子元素再怎么写 flex 或 grid-column，只要父容器没开对应 display 模式，就等于没写。