CSS 常用布局可分为 5 大类，覆盖从简单到复杂的页面需求，核心特点和使用场景如下：
1. 流式布局（Flow Layout）
核心原理：浏览器默认布局方式，元素按「块级独占一行、行内并排」的规则自然排列，宽高随内容或父容器自适应。
关键属性：无需额外属性，依赖
display: block/inline/inline-block、margin、padding调整。适用场景：简单文本排版、基础组件（如按钮、标签）、无复杂对齐要求的页面（如文章详情页）。
优缺点：优点是无需额外配置、兼容性极强；缺点是无法精确控制元素位置，复杂布局需嵌套大量容器。
2. 浮动布局（Float Layout）
核心原理：通过
float: left/right让元素脱离文档流，向父容器左侧或右侧浮动，其他内容会环绕该元素。关键操作：必须给「浮动元素的父容器」清除浮动（如添加
clear: both的伪元素::after），避免父容器高度塌陷。适用场景：早期的多列布局（如左侧导航 + 右侧内容）、图文环绕效果（如新闻中的图片 + 文字）。
优缺点：优点是实现简单、兼容性好（支持 IE 低版本）；缺点是需处理清除浮动，复杂布局易出现「浮动错乱」，已逐渐被 Flex/Grid 替代。
3. 弹性布局（Flex Layout）
核心原理：给父容器设置
display: flex，子元素成为「弹性项」，可通过父容器属性（如对齐、分布）和子元素属性（如排序、占比）精确控制布局，是目前最常用的布局方案之一。关键属性：
父容器：
justify-content（水平对齐）、align-items（垂直对齐）、flex-direction（排列方向）、flex-wrap（是否换行）。子元素：
flex: 1（占比分配）、order（排序）、align-self（单独垂直对齐）。
适用场景：几乎所有场景，尤其是「对齐需求明确」的布局（如导航栏、卡片内部元素对齐、多列等高布局）、响应式布局（配合
flex-wrap）。优缺点：优点是代码简洁、无需处理浮动、支持灵活对齐和自适应；缺点是仅支持「一维布局」（要么行、要么列），无法同时控制行列。
4. 网格布局（Grid Layout）
核心原理：给父容器设置
display: grid，将容器划分为「行 + 列」的二维网格，子元素可指定占据的「行数和列数」，是复杂布局的最优解。关键属性：
父容器：
grid-template-rows（定义行高）、grid-template-columns（定义列宽）、grid-gap（网格间距）、place-items（子元素整体对齐）。子元素：
grid-row（占据的行范围）、grid-column（占据的列范围）。
适用场景：复杂的二维布局（如仪表盘、不规则卡片布局、网页整体框架（header+sidebar+content+footer））、需要精确控制元素行列位置的场景。
优缺点：优点是支持二维布局、代码更直观（直接定义网格）、减少嵌套；缺点是兼容性略低于 Flex（不支持 IE 低版本），简单布局用它略显冗余。
5. 定位布局（Position Layout）
核心原理：通过
position改变元素的定位方式，使其脱离正常文档流，按指定参照物（父容器或视口）定位。常见取值与场景：
position: relative：相对自身原位置偏移，不脱离文档流，常用于作为「绝对定位元素的参照物」。position: absolute：绝对定位，相对于最近的「已定位父容器」（非 static）偏移，脱离文档流，适用于「悬浮元素」（如弹窗、下拉菜单、图标定位）。position: fixed：固定定位，相对于浏览器视口偏移，不随页面滚动，适用于「固定导航栏、回到顶部按钮」。position: sticky：粘性定位，滚动到指定位置后固定，适用于「列表标题、分段导航」。
优缺点：优点是能精确控制元素位置；缺点是脱离文档流后易导致布局重叠，需谨慎使用。
总结：布局选择建议
简单文本 / 组件对齐 → 优先用 Flex（代码最少）。
复杂二维布局（多行多列） → 优先用 Grid（最直观）。
图文环绕 / 兼容旧浏览器 → 用 Float（需处理清除浮动）。
固定 / 悬浮元素 → 用 Position（根据需求选 absolute/fixed/sticky）。
无特殊需求 → 浏览器默认的 Flow（无需额外代码）。