Flex适用于一维布局（单行/列对齐、分布、顺序调整），Grid专用于二维网格（行列同时控制）；二者分工明确，常嵌套使用——Grid作外层区域划分，Flex处理内部细节对齐。
现代网页开发中，display: flex 和 display: grid 是实际项目里最主流、最被广泛采用的布局方式——不是“之一”，而是事实上的双核心。老式 float 或 position 布局已退居补丁位，仅用于兼容或极特殊定位需求。
什么时候该用 Flexbox？
Flexbox 是一维布局，适合处理“一行或一列内元素的对齐、分布、顺序和伸缩”。它不是用来搭整个页面骨架的，而是干局部活的。
- 导航栏（
nav）里a标签水平铺开 + 右对齐登录入口 - 卡片列表需要等高、自动换行、间隙均分（配合
flex-wrap: wrap） - 表单控件与标签垂直居中对齐（
align-items: center） - 按钮组、工具栏、页脚版权信息居中+右侧链接右对齐（用
margin-left: auto） - 移动端适配时，把侧边栏从“左列”临时变成“顶部抽屉”，只需改
flex-direction，不用动 HTML 结构
注意：flex 容器内子元素默认不换行，要多行必须显式加 flex-wrap: wrap；另外，flex: 1 在 IE10–11 中有兼容性问题，若需支持，得写全 flex: 1 1 0。
Grid 布局适合哪些页面结构？
CSS Grid 是二维系统，真正用来定义“页面级框架”的技术。它管的是“第几行第几列放什么”，而不是“怎么塞进去”。
立即学习“前端免费学习笔记（深入）”；
- 典型三栏布局：头部、左侧导航、主内容区、右侧边栏、页脚——用
grid-template-areas一眼看清结构 - 仪表盘（Dashboard）：多个尺寸不一的卡片按网格区域拼接，支持跨行跨列（
grid-column: 1 / -1） - 响应式断点切换：用
@media改grid-template-columns，比 Flexbox 的嵌套容器更干净 - 模态框（Modal）全屏居中：配合
place-items: center，比transform: translate(-50%, -50%)更可靠（不依赖已知宽高）
注意：grid 在 Safari 16.4+ 才完全支持 subgrid，如需子网格能力，目前仍需降级方案；另外，Grid 不适用于需要动态增删项目的列表（比如聊天消息流），它更适合静态结构明确的区域。
为什么别再用 float 做整体布局？
float 的设计本意是图文环绕，不是页面架构。现在还硬套它，等于给项目埋雷。
- 清除浮动（
clear: both或伪元素）是额外心智负担，且容易漏写导致父容器高度塌陷 - 响应式时，
float元素在窄屏下会意外换行、错位，调试成本远高于 Grid/Flex - 语义混乱：用
div class="left-sidebar"+float: left，既没表达结构意图，也不利于屏幕阅读器解析 - 现代构建工具（Vite、Webpack）默认启用 autoprefixer，但
float相关 hack 不会被自动补全，兼容性靠人肉维护
唯一合理保留 float 的场景：新闻正文里图片左/右浮动并文字环绕——这时它还在原始语义范围内。
语义化标签和布局技术怎么配合？
HTML5 的 header、main、aside、footer 等语义标签，本身不带样式，也不决定布局方式。它们和 CSS 是解耦的。
- 你可以用
grid把aside放右边，也可以用flex把它压到顶部——语义不变，视觉可变 - 错误做法：为了“看起来像侧边栏”而滥用
div+float，放弃aside；这会让 SEO 和无障碍访问直接掉档 - 推荐组合：
main用grid划分内容区块，内部卡片用flex对齐标题与操作按钮，文本段落保持标准流
真正容易被忽略的点是：Grid/Flex 的强大，反而让人忽略内容流本身的价值。比如一个纯文字文章页，display: grid 强行分三栏只会降低可读性——这时候老老实实用标准流 + max-width + line-height，才是对用户最诚实的布局。
