Flex弹性布局
Flex是CSS3中最常用的弹性布局，专为响应式设计打造，轻松实现水平/垂直居中、自适应排列。
核心用法：给父元素设置 display: flex，即可开启弹性布局。
/* 父容器 */
.flex-box {
display: flex; /* 开启弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
gap: 10px; /* 子元素间距 */
}
Grid网格布局
Grid是二维布局系统，可同时控制行和列，适合复杂的网页网格布局，是未来主流布局方案。
核心用法：给父元素设置 display: grid，定义行列尺寸。
/* 父容器 */
.grid-box {
display: grid; /* 开启网格布局 */
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
grid-gap: 15px; /* 网格间距 */
}
Float浮动布局
传统的网页布局方式，通过浮动让元素脱离文档流，实现并排排列，兼容老旧浏览器。
核心用法：给元素设置 float: left/right，记得清除浮动。
/* 子元素浮动 */
.float-item {
float: left;
width: 50%;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
Position定位布局
通过定位精确控制元素位置，分为相对定位、绝对定位、固定定位，适合悬浮、弹窗等场景。
核心用法：配合 position 属性 + top/right/bottom/left 使用。
/* 固定定位：固定在页面顶部 */
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* 绝对定位+相对定位 */
.relative { position: relative; }
.absolute { position: absolute; top: 0; right: 0; }