浮动布局通过float实现文字环绕或简单多列，需注意清除浮动；2. 定位布局利用position控制元素位置，适合弹窗、吸顶等特殊效果；3. 弹性盒子（Flexbox）为一维布局，适用于导航、居中等组件级排布；4. 网格布局（Grid）是二维系统，擅长复杂页面结构如仪表盘；5. 传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
在CSS中，常见的布局方式有多种，每种适用于不同的场景和需求。以下是几种主流的布局方法，帮助你更灵活地构建网页结构。
1. 浮动布局（Float Layout）
通过 float 属性让元素向左或向右浮动，常用于实现文字环绕图片或多列内容排列。
虽然现在不推荐用于整体页面布局，但在某些小范围排版中仍有使用。
注意：使用浮动后需要清除浮动（clear），避免影响后续元素。2. 定位布局（Positioning Layout）
利用 position 属性（如 relative、absolute、fixed、sticky）控制元素的位置。
立即学习“前端免费学习笔记（深入）”；
- relative：相对自身原位置偏移
- absolute：相对于最近的已定位祖先元素进行定位
- fixed：相对于视口固定位置，常用于导航栏
- sticky：介于 relative 和 fixed 之间，滚动到特定位置后固定
适合做弹窗、侧边栏、吸顶导航等特殊定位效果。
3. 弹性盒子布局（Flexbox Layout）
Flexbox 是一维布局模型，适合在行或列方向上对齐和分配空间。
特别适合做组件级布局，比如导航栏、卡片排列、垂直居中等。
- 设置容器为 display: flex
- 通过 justify-content、align-items 控制主轴和交叉轴对齐
- 子元素可自动伸缩以填充剩余空间
现代布局中最常用的方案之一。
4. 网格布局（Grid Layout）
CSS Grid 是二维布局系统，可以同时处理行和列，适合复杂页面结构。
适用于整体页面布局、仪表盘、相册网格等。
- 通过 display: grid 定义网格容器
- 使用 grid-template-columns 和 grid-template-rows 定义行列大小
- 可用 grid-column 和 grid-row 控制项目跨格显示
功能强大，是目前最灵活的布局方式。
5. 传统文档流与块级布局
默认的文档流布局，块级元素独占一行，内联元素水平排列。
结合 margin、padding 和 box model 实现基础排版。
虽然简单，但仍是理解其他布局的基础。
基本上就这些。根据项目需求选择合适的方式，比如 Flexbox 处理一维排列，Grid 做复杂网格，定位实现特殊层叠效果。现代开发中，Flexbox 和 Grid 已成为主流，兼容性良好，推荐优先掌握。
