现代CSS布局推荐使用Flexbox和Grid，前者适用于一维对齐与响应式设计，后者适合二维复杂结构；定位用于精确控制元素位置，浮动已逐步淘汰仅用于兼容旧项目。
CSS 实现页面布局的方式多种多样，核心目标是控制元素在页面中的位置、大小和排列方式。现代布局方法更加灵活高效，能适应不同设备和屏幕尺寸。以下是几种主流且实用的 CSS 布局方式。
1. 浮动布局（Float Layout）
早期常用的布局方式，通过 float 属性让元素向左或向右浮动，常用于图文环绕或简单多列布局。
说明： - 使用 float: left; 或 float: right; 使元素脱离文档流。 - 需配合 clear 属性清除浮动，防止影响后续元素。 - 现在主要用于兼容旧项目，不推荐作为主要布局手段。示例：
.container::after {
content: "";
display: block;
clear: both;
}
.column {
float: left;
width: 50%;
}
2. 定位布局（Position Layout）
通过 position 属性精确控制元素的位置，适用于需要脱离文档流的场景。
立即学习“前端免费学习笔记（深入）”；
常用值： - relative：相对自身原始位置偏移。 - absolute：相对于最近的已定位祖先元素定位。 - fixed：相对于视口固定位置，滚动不变。 - sticky：结合 relative 和 fixed 的特性，滚动到特定位置后固定。建议：
- 适合做弹窗、导航栏、回到顶部按钮等局部定位。
- 不适合作为整体页面结构布局。
3. 弹性布局（Flexbox）
一维布局模型，适合对齐和分配容器内项目的空间，特别适合响应式设计。
关键属性： - 父容器设置 display: flex; 开启弹性布局。 - 使用 justify-content 控制主轴对齐。 - 使用 align-items 控制交叉轴对齐。 - 子项可通过 flex 属性定义伸缩比例。适用场景：
- 导航栏水平排列。
- 模块等高布局。
- 居中对齐（水平垂直居中非常简单）。
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
4. 网格布局（Grid）
CSS Grid 是二维布局系统，可以同时控制行和列，适合复杂页面结构。
特点： - 父容器设置 display: grid;。 - 使用 grid-template-columns 和 grid-template-rows 定义行列尺寸。 - 可用 grid-gap 设置间距。 - 支持区域命名，通过 grid-template-areas 直观布局。优势：
- 轻松实现传统布局（如圣杯布局、双栏、三栏）。
- 响应式更灵活，配合 fr 单位和媒体查询使用效果更好。
示例：
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: "sidebar main";
gap: 20px;
}
5. 流式与响应式布局
结合百分比宽度、em/rem 单位、媒体查询等技术，使页面适配不同设备。
常用技巧： - 容器宽度使用 % 或 max-width 保证可伸缩。 - 字体使用 rem 或 em 便于缩放。 - 加入 @media 查询针对不同屏幕调整布局。例如：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
基本上就这些。选择哪种方式取决于你的具体需求：简单对齐用 Flex，复杂结构用 Grid，精确定位用 Position，老项目维护可能遇到 Float。现代开发推荐优先掌握 Flexbox 和 Grid。
