CSS布局是前端页面开发的核心基础，不同的布局方案对应不同的排版需求，掌握各类CSS布局代码能大幅提升页面开发效率，满足多样化的设计实现要求。
浮动布局代码
浮动布局是最早期的CSS布局方案之一，主要通过float属性实现元素左右排列，常用于图文环绕、多列排列等场景，不过需要注意清除浮动避免父元素高度塌陷。
/* 基础浮动布局代码 */
.container {
width: 100%;
overflow: hidden; /* 清除浮动的一种方式 */
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.right {
float: right;
width: calc(100% - 220px); /* 减去左侧宽度和间距 */
height: 300px;
background-color: #e0e0e0;
}
/* 清除浮动通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
定位布局代码
定位布局通过position属性控制元素在页面中的位置，适合实现元素固定、层叠、精准偏移等效果，常见的定位类型有相对定位、绝对定位和固定定位。
/* 定位布局代码示例 */
/* 相对定位：相对于自身原位置偏移 */
.relative-box {
position: relative;
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff9999;
}
/* 绝对定位：相对于最近的已定位父元素偏移 */
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: #f5f5f5;
}
.absolute-box {
position: absolute;
bottom: 50px;
right: 50px;
width: 150px;
height: 150px;
background-color: #99ccff;
}
/* 固定定位：相对于浏览器窗口定位 */
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333333;
color: #ffffff;
}
Flex弹性盒布局代码
Flex布局是目前最常用的布局方案，属于一维布局，能轻松实现元素的对齐、分布、排序等效果，适配响应式场景的能力很强，代码编写也比较简洁。
/* Flex布局基础代码 */
.flex-container {
display: flex;
/* 主轴方向：row水平排列 column垂直排列 */
flex-direction: row;
/* 主轴对齐方式：space-between两端对齐 space-around周围留白 center居中 */
justify-content: space-between;
/* 交叉轴对齐方式：center居中 flex-start顶部对齐 flex-end底部对齐 */
align-items: center;
width: 100%;
height: 400px;
padding: 20px;
box-sizing: border-box;
background-color: #f8f8f8;
}
.flex-item {
width: 120px;
height: 120px;
background-color: #66cc99;
/* 单个元素的交叉轴对齐方式，覆盖容器设置 */
align-self: flex-start;
}
/* 响应式适配：小屏幕下垂直排列 */
@media screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
justify-content: flex-start;
}
}
Grid网格布局代码
Grid布局是二维布局方案，同时控制行和列的排列，适合实现复杂的网格类页面结构，比如后台管理系统布局、卡片网格排列等场景。
/* Grid布局代码示例 */
.grid-container {
display: grid;
/* 定义列：3列，每列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 定义行：自动填充，最小高度100px */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
/* 网格间隙 */
gap: 20px;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.grid-item {
background-color: #ffcc66;
padding: 15px;
}
/* 单个元素跨列跨行 */
.grid-item-special {
/* 跨2列 */
grid-column: span 2;
/* 跨2行 */
grid-row: span 2;
background-color: #cc99ff;
}
布局方案选择建议
不同布局方案对应不同的使用场景，开发者可以根据实际需求选择：
- 简单的文字环绕、早期多列排列需求可以使用浮动布局
- 元素固定位置、层叠效果、精准偏移需求使用定位布局
- 一维排列、响应式对齐需求优先使用Flex弹性盒布局
- 复杂的二维网格结构、多行多列排列需求使用Grid网格布局
实际开发中也可以混合使用多种布局方案，比如外层用Flex做整体排列，内层用Grid做局部网格结构，灵活组合能更高效地实现页面效果。