1. 前言
在前端开发中，CSS布局是构建网页的基础技能。本文将全面解析CSS中四种最常用的布局方式：Float浮动布局、Flex弹性布局、Grid网格布局以及Position定位布局，帮助开发者根据不同场景选择合适的布局方案。
2. Float浮动布局
2.1 基本概念
Float是CSS早期用于实现元素排列的主要属性，最初设计目的是实现文字环绕图片的效果。
2.2 核心特性
-
取值：
left|right|none|inherit -
脱离文档流：浮动元素会脱离正常文档流
-
清除浮动：使用
clear属性或清除浮动技巧
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
}
.box {
width: 30%;
height: 150px;
margin: 1.5%;
text-align: center;
line-height: 150px;
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}2.3预览效果（此时小盒子中没有加float:left；）
换行的原因是因为div属于块级元素
2.4预览效果（此时小盒子中加float:left；）
此时可以看到在大盒子container 容器中包含的三个小盒子使用了float进行水平排布,并且使用margin:1.5%，让里面三个子盒子左右两边出现间隔，但是父盒子背景颜色没有显示出来，那是因为没有清除浮动。
为什么要清除浮动呢
-
父元素高度塌陷：当父元素包含浮动子元素时，父元素无法感知浮动子元素的高度，导致父元素的高度塌陷，即父元素的高度变为0或只包含未浮动的子元素的高度。这会导致后续元素布局混乱，占据原本属于父元素的空间。
-
影响后续元素布局：由于父元素高度塌陷，后续元素会向上移动，占据原本属于父元素的空间，导致布局混乱。如果父元素设置了背景颜色，由于高度塌陷，背景颜色可能无法完整显示，只覆盖了未浮动内容的高度。
-
文字环绕效果：浮动最初的设计是为了让文本环绕图像。但随着CSS的发展，浮动被广泛应用于布局中，尤其是在多列布局、图文混排等场景中。然而，如果不妥善处理浮动，会导致布局混乱和视觉效果不佳。
清除浮动的方法包括以下几种：
-
使用clear属性：在浮动元素的后面添加一个空元素，并设置
clear: both;。这个空元素会强制换行，并阻止后续元素上移。 -
使用::after伪元素：通过::after伪元素创建一个不可见的块级元素，并设置
clear: both;。这种方法更优雅，避免了添加额外的HTML元素。 -
设置父元素overflow属性：将父元素的
overflow属性设置为hidden、auto或scroll，可以使其包含浮动元素。但需要注意，这可能会导致内容被裁剪。
例如此处使用第三个方法设置父元素overflow属性
此时父盒子的背景颜色重新显示出来
2.5 优缺点分析
✅ 优点：
-
浏览器兼容性好
-
实现简单文字环绕效果
❌ 缺点：
-
需要手动清除浮动
-
不适合复杂布局
-
响应式适配困难
3. Flex弹性布局
3.1 基本概念
Flex布局是CSS3引入的现代化一维布局方案，特别适合处理未知或动态尺寸的元素排列。
3.2 核心属性
| 容器属性 | 项目属性 | 说明 |
|---|---|---|
flex-direction | order | 主轴方向 |
flex-wrap | flex-grow | 换行方式 |
justify-content | flex-shrink | 主轴对齐 |
align-items | flex-basis | 交叉轴对齐 |
align-content | align-self | 多轴线对齐 |
3.3例如以上面案例为例子
此时把代码先进行删除回到最开始的样子
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
}
.box {
width: 30%;
height: 150px;
text-align: center;
line-height: 150px;
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}此时预览效果如图所示
给父容器添加Flex布局效果（默认会让里面的子元素在一行）
预览效果如图所示
给父容器中添加justify-content: center;属性，可以让里面的全部子元素居中（box1、box2、box3盒子）
给父容器中添加justify-content: space-around;属性，可以让里面的子元素左右距离均等分别（box1、box2、box3盒子），最左边和最右边的只有距离父容器的一半
给父容器中添加justify-content: space-between;属性，可以让里面的子元素左右距离均等分别（box1、box2、box3盒子），最左边和最右边不留空间
现在我们给父容器中额外添加三个子盒子（box4、box5、box6）每个子盒子宽度都为width: 30%;
如果放置三个，那么这三个盒子就占据了90%，现在放置6个就导致六个盒子的宽度都进行压缩了，并且没有换行(默认不换行)如图所示
现在给父容器加一个flex-wrap: wrap;属性，现在又变成我们想要的样子
但是第一行和第二行上下没有距离，我们可以给子盒子设置margin值，也可以设置gap的值，例如现在给父容器添加gap: 30px;属性如图所示
现在我们修改代码
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}
.box {
width: 30%;
height: 150px;
color: white;
}
.box1 {
background-color: #3498db;
height: 200px;
}
.box2 {
background-color: #2ecc71;
height: 150px;
}
.box3 {
background-color: #e74c3c;
height: 50px;
}
查看效果
怎么可以让里面的三个子盒子交叉轴方向居中呢，这里可以理解为垂直方向怎么居中，因为默认是以水平方向为主轴，垂直方向为交叉轴
给父容器添加align-items: center;属性，让交叉轴居中
最后结合主轴和交叉轴学到的方法，我们让三个盒子中的内容水平居中，垂直居中
查看效果
我们也可以使用flex-direction: column;属性进行主轴和交叉轴切换。
具体别的功能，我们可以参考阮一峰的flex教程讲的很详细
4. Grid网格布局
4.1 基本概念
CSS Grid是强大的二维布局系统，适合构建复杂的网页结构。
4.2 核心属性
| 容器属性 | 项目属性 | 说明 |
|---|---|---|
grid-template-columns | grid-column | 定义列 |
grid-template-rows | grid-row | 定义行 |
grid-template-areas | grid-area | 区域命名 |
gap | - | 间距控制 |
place-items | place-self | 对齐控制 |
修改代码
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
}
.box {
height: 200px;
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}
效果如图所示
现在给父容器添加display: grid;开启网格布局，使用grid-template-columns: 1fr 1fr 1fr;让里面一行显示三个，如果要四个可以修改成grid-template-columns: 1fr 1fr 1fr 1fr;就直接往里面添加数量，也可以使用grid-template-columns: repeat(3, 1fr);表示一行占三个减少代码长度
现在我们修改代码，把数量增加到6个
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
<div class="box box6">Box 6</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box {
height: 150px;
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}
.box4 {
background-color: #d383b0;
}
.box5 {
background-color: #0785bc;
}
.box6 {
background-color: #b59c99;
}效果如图所示
也可以使用gap属性设置距离，例如gap: 20px;
设置单个盒子所占的大小
添加子盒子数量
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
<div class="box box6">Box 6</div>
<div class="box box7">Box 7</div>
<div class="box box8">Box 8</div>
<div class="box box9">Box 9</div>
</div>body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.box {
height: 150px;
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}
.box4 {
background-color: #d383b0;
}
.box5 {
background-color: #0785bc;
}
.box6 {
background-color: #b59c99;
}
.box7 {
background-color: #1b9104;
}
.box8 {
background-color: #f98f03;
}
.box9 {
background-color: #9001c4;
}效果如图所示
给box1占据两倍现在的宽度，给box1添加grid-column: 1/3;属性
如图所示
现在我们让box5高度占两份使用 grid-row: span 2;属性
把.box盒子的高度删除，并且给父容器添加高度600px
效果如图所示
5. Position定位布局
5.1 定位类型
| 值 | 描述 |
|---|---|
static | 默认定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
例如我们在父盒子中添加一个子盒子
<div class="father">
<div class="son"></div>
</div>.father{
width: 300px;
height: 300px;
background-color: salmon;
}
.son{
width: 50px;
height: 50px;
background-color: blue;
}效果如图所示
使用定位布局需要记住（子绝父相），父盒子相对定位，子盒子绝对定位，默认子盒子是在父盒子的左上角
我们现在添加定位并且让子盒子（蓝色的）到父盒子（浅红色的）右上角
如图所示
可以使用left、right、top、bottom值让子盒子的位置发生变化
现在我们使用position: fixed;进行固定定位，把父盒子高度改成5000px，宽度百分之百，使用固定定位，让子盒子在父盒子的右下角，并且右边和顶部距离都设置20px,注意滚动条的位置
如图所示
现在滚到滚动条
滚动条位置发生变化，而子盒子位置仍然在这个位置
6. 四种布局对比
| 特性 | Float | Flex | Grid | Position |
|---|---|---|---|---|
| 维度 | 一维 | 一维 | 二维 | 无 |
| 文档流 | 脱离 | 正常 | 正常 | 可能脱离 |
| 响应式 | 困难 | 优秀 | 优秀 | 视情况 |
| 适用场景 | 文字环绕 | 组件布局 | 整体布局 | 特殊定位 |
| 浏览器支持 | 全部 | IE10+ | IE11+ | 全部 |
7. 最佳实践建议
-
优先选择顺序：
复制
下载
Flex/Grid > Position > Float
-
组合使用技巧：
-
使用Grid构建整体框架
-
使用Flex排列内部组件
-
使用Position处理特殊定位需求
-
避免在新项目中使用Float布局
-
8. 常见问题解答
Q：Flex和Grid该如何选择？
A：Flex适合线性排列的组件（导航栏、卡片列表），Grid适合二维布局（整个页面框架）
Q：position: absolute的定位基准是什么？
A：相对于最近的非static定位的祖先元素，如果没有则相对于初始包含块
Q：如何实现传统Float布局的等高列效果？
A：现代布局中应使用Flex或Grid：
9. 总结
掌握这四种CSS布局技术是前端开发的基础。随着浏览器支持度的提升，建议在新项目中优先使用Flex和Grid布局，它们能提供更强大、更灵活的布局能力，同时代码更简洁、更易维护。Position定位适合处理特殊定位需求，而Float布局在现代网页开发中已逐渐被淘汰，仅需了解其原理以维护老项目即可。
10.案例展示
现在我们做个综合案例，把flex布局、grid布局，position定位布局全部结合起来
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">
Box 1
<div class="positionBox"></div>
</div>
<div class="box box2">
Box 2
<div class="positionBox"></div>
</div>
<div class="box box3">
Box 3
<div class="positionBox"></div>
</div>
<div class="box box4">
Box 4
<div class="positionBox"></div>
</div>
<div class="box box5">
Box 5
<div class="positionBox"></div>
</div>
<div class="box box6">
Box 6
<div class="positionBox"></div>
</div>
<div class="box box7">
Box 7
<div class="positionBox"></div>
</div>
<div class="box box8">
Box 8
<div class="positionBox"></div>
</div>
<div class="box box9">
Box 9
<div class="positionBox"></div>
</div>
</div>
body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
}
.box {
color: white;
}
.box1 {
background-color: #3498db;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}
.box4 {
background-color: #d383b0;
}
.box5 {
background-color: #0785bc;
}
.box6 {
background-color: #b59c99;
}
.box7 {
background-color: #1b9104;
}
.box8 {
background-color: #f98f03;
}
.box9 {
background-color: #9001c4;
}
接下来进行代码修改和页面美化
<!-- 最外层大盒子 -->
<div class="container">
<div class="box box1">
Box 1
<div class="positionBox"></div>
</div>
<div class="box box2">
Box 2
<div class="positionBox"></div>
</div>
<div class="box box3">
Box 3
<div class="positionBox"></div>
</div>
<div class="box box4">
Box 4
<div class="positionBox"></div>
</div>
<div class="box box5">
Box 5
<div class="positionBox"></div>
</div>
<div class="box box6">
Box 6
<div class="positionBox"></div>
</div>
<div class="box box7">
Box 7
<div class="positionBox"></div>
</div>
<div class="box box8">
Box 8
<div class="positionBox"></div>
</div>
<div class="box box9">
Box 9
<div class="positionBox"></div>
</div>
</div>
body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
background-color: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 600px;
gap: 30px;
}
.box {
position: relative;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
background-color: #3498db;
grid-column: 1/3;
}
.box2 {
background-color: #2ecc71;
}
.box3 {
background-color: #e74c3c;
}
.box4 {
background-color: #d383b0;
}
.box5 {
background-color: #0785bc;
grid-row: span 3;
}
.box6 {
background-color: #b59c99;
}
.box7 {
background-color: #1b9104;
}
.box8 {
background-color: #f98f03;
}
.box9 {
background-color: #9001c4;
}
.positionBox{
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
top: 20px;
right: 20px;
}
希望这篇全面的CSS布局指南能帮助您在开发中选择合适的布局方案！如果有任何问题，欢迎在评论区留言讨论。
扫一扫
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
