position、float、flex、grid 之间到底是什么关系

用户971417181427
4 阅读9分钟

很多前端初学者会把 position、float、flex、grid 混在一起。
感觉它们都像“布局方式”，但又不知道到底谁管什么、什么时候该用谁。
这篇文章的目标，就是把它们之间的关系一次讲透。

目录

一、先说结论：它们不是一类东西

这是最重要的一句。

很多人会把：

  • position
  • float
  • flex
  • grid

都理解成“布局方式”。

这个说法不完全错，但不够准确。

更准确的理解应该是：

  • position：定位机制
  • float：浮动机制
  • flex：一维布局系统
  • grid：二维布局系统

也就是说，它们并不是同一级别、同一种职责的东西。

你可以先有一个整体印象：

  • position 主要解决“元素放到哪里”
  • float 原本主要解决“文字环绕”
  • flex 主要解决“一排 / 一列怎么排”
  • grid 主要解决“行和列一起怎么排”

所以它们不是互相平替的关系，而是不同层次、不同历史阶段的工具。

二、这四个东西分别在解决什么问题

先用一句话分别定义：

position

控制元素是否脱离普通文档流，以及相对于谁进行偏移定位。

float

让元素浮动到左边或右边，并让周围文本环绕它。

flex

让父元素控制子元素沿一个主轴进行弹性排列。

grid

让父元素控制子元素在二维网格中排列。

三、position 是“定位机制”

position 主要是说：

这个元素应该按照普通文档流放，还是按某种定位规则放。

常见值有：

  • static
  • relative
  • absolute
  • fixed
  • sticky

1. static

默认值。

.box {
  position: static;
}

特点：

  • 按普通文档流排列
  • top / right / bottom / left 不生效

绝大多数元素默认都是这个状态。

2. relative

相对定位。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

特点：

  • 元素仍然保留在原来的文档流位置
  • 只是视觉上相对原位置偏移
  • 原来占的位置还在
  • 经常作为 absolute 子元素的参考系（父相子绝）

3. absolute

绝对定位。

.box {
  position: absolute;
  top: 0;
  right: 0;
}

特点：

  • 脱离普通文档流
  • 不再占据原本位置
  • 相对于最近的已定位祖先元素定位
  • 常用于角标、弹层、覆盖层、局部精确摆放

4. fixed

固定定位。

.box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

特点：

  • 脱离普通文档流
  • 相对于视口定位
  • 滚动页面时位置通常不变

常见场景：

  • 返回顶部按钮
  • 固定导航
  • 悬浮客服按钮

5. sticky

粘性定位。

.box {
  position: sticky;
  top: 0;
}

特点：

  • 在某个滚动阈值前像普通元素
  • 到达阈值后像固定定位一样“粘住”

常见场景：

  • 吸顶标题
  • 粘性侧边栏

position 的本质

position 解决的是：

  • 元素是否脱离文档流
  • 元素相对于谁定位
  • 元素偏移到哪里

它不是专门为了“做整体布局”设计的，而是为了定位。

四、float 是早期的“文字环绕 + 布局副产物”

float 最原始的设计目的，其实不是做页面整体布局，而是：

让文字围绕图片或某个盒子环绕显示。

例如新闻排版里，图片靠左，文字环绕图片。

img {
  float: left;
  margin-right: 12px;
}

这样文字就会绕着图片排。

1. float 的典型行为

.box {
  float: left;
}

特点：

  • 元素尽量向左浮动
  • 后面的内容会环绕它
  • 元素会脱离普通文档流的一部分影响
  • 父元素高度经常塌陷，需要清除浮动

2. 为什么以前大家爱用 float 做布局

在 flex 和 grid 出现之前，CSS 没有那么好用的现代布局系统。

所以开发者会用 float 来实现：

  • 两列布局
  • 三列布局
  • 左右结构布局

这是一种“拿浮动硬做布局”的历史产物。

3. 为什么现在不推荐用 float 做整体布局

因为它的问题很多：

  • 不直观
  • 容易高度塌陷
  • 需要清除浮动
  • 对齐和居中都不方便
  • 本来就不是为整体布局设计的

所以现代开发里：

  • float 主要保留在文字环绕等少数场景
  • 大多数布局交给 flex 和 grid

五、flex 是一维布局系统

flex 的核心是：

父元素控制子元素沿一个方向排列。

示例：

.container {
  display: flex;
}

一旦父元素变成 flex 容器，它的子元素就不再按普通流随便排，而是按 flex 规则排列。

1. 什么叫一维布局

一维布局就是你主要关心一个方向：

  • 横向一排
  • 或纵向一列

典型场景：

  • 导航栏
  • 按钮组
  • 表单行
  • 垂直菜单
  • 居中对齐

2. flex 能解决什么问题

它特别擅长：

  • 横向排列
  • 纵向排列
  • 两端对齐
  • 居中
  • 自动分配剩余空间
  • 子元素弹性伸缩

例如：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. flex 的本质

flex 不是定位机制，也不是浮动机制。

它是：

一个给父元素用的现代布局系统，用来管理子元素的一维排列。

六、grid 是二维布局系统

grid 的核心是：

父元素通过行和列一起管理子元素的位置。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

1. 什么叫二维布局

二维布局就是你不只要管一行，还要同时管：

  • 行
  • 列

典型场景：

  • 卡片墙
  • 后台仪表盘
  • 相册网格
  • 复杂页面骨架布局

2. grid 能解决什么问题

它特别擅长：

  • 多列布局
  • 多行多列同时控制
  • 区域划分
  • 复杂页面骨架

例如：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr;
}

3. grid 的本质

grid 也是给父元素用的，但它比 flex 更强在二维管理。

所以最常见的总结就是：

  • flex：一维
  • grid：二维

七、它们四个之间的关系到底是什么

1. position 和 flex/grid 不是一个维度的东西

  • position 讲的是“定位”
  • flex/grid 讲的是“布局”

例如：

.parent {
  display: flex;
}

.child {
  position: absolute;
}

这说明一个元素完全可能同时出现在 flex 布局环境中，又使用定位。

所以它们不是互斥关系，而是不同层次的规则。

2. float 和 flex/grid 是历史演进关系

可以这么理解：

  • 很早以前没有好用布局系统，只能拿 float 做布局
  • 后来有了 flex
  • 再后来有了 grid

所以：

float 更像旧时代的布局替代方案，flex 和 grid 才是现代布局主力。

3. position 常用于“局部摆放”，flex/grid 常用于“整体布局”

例如：

  • 页面整体头部、主体、侧边栏 → flex / grid
  • 角标、关闭按钮、弹窗定位 → position

这两个经常会同时使用。

4. float 现在主要退回到“文字环绕”本职工作

例如：

.article img {
  float: left;
  margin-right: 16px;
}

这就很合理。

但如果你用 float 去做一个复杂后台布局，通常就不推荐了。

八、真实开发中怎么选

这一节最实战。

场景 1：做页面整体结构

例如：

  • 左侧菜单 + 右侧内容
  • 顶部 + 主体
  • 多列卡片区

优先考虑：

  • 简单一维结构 → flex
  • 复杂二维结构 → grid

场景 2：做局部精确定位

例如：

  • 卡片右上角角标
  • 输入框里的小图标
  • 弹窗关闭按钮
  • 固定悬浮按钮

优先考虑：

  • position: absolute
  • position: fixed
  • position: sticky

场景 3：图文混排，文字绕图

优先考虑：

  • float

这是它最自然的使用场景。

场景 4：按钮横排、垂直居中、元素两端对齐

优先考虑：

  • flex

这类问题几乎就是 flex 的主场。

场景 5：卡片网格、后台面板、多区域布局

优先考虑：

  • grid

九、最容易混淆的几个点

1. position: absolute 不是“高级布局方案”

很多初学者喜欢用 absolute 去摆整个页面。

这通常会带来：

  • 可维护性差
  • 响应式很痛苦
  • 内容一多就乱
  • 不适合正常文档流布局

所以：

absolute 更适合局部精确定位，不适合承担整个页面布局。

2. float 不是现代横向布局首选

以前大家会写：

.item {
  float: left;
}

让一排元素横着排。

现在更推荐：

.parent {
  display: flex;
}

因为更清晰、更稳定、更容易控制对齐和间距。

3. flex 不是“万能布局”

flex 很强，但它主要适合一维。

如果你同时想很好地控制：

  • 多行
  • 多列
  • 区域划分

那 grid 往往更自然。

4. grid 也不是“永远比 flex 高级”

不是谁高级的问题，而是谁更适合。

  • 一排按钮 → flex 更直接
  • 三列卡片墙 → grid 更自然

5. 它们经常组合使用

真实项目里非常常见的组合是：

  • 整体布局用 grid
  • 某一行操作区用 flex
  • 某个小图标用 absolute
  • 图文环绕用 float

这才是真实开发。

十、一张表彻底总结

技术本质主要解决什么是否脱离普通流最适合场景
position定位机制元素相对谁、偏移到哪absolute/fixed 会脱离，relative 不脱离角标、弹层、固定按钮、吸顶
float浮动机制文字环绕、旧式布局会影响普通流图文环绕、少量特殊场景
flex一维布局系统一行或一列的对子元素布局不靠脱流实现导航、按钮组、居中、一维排列
grid二维布局系统行和列同时管理的布局不靠脱流实现卡片墙、仪表盘、页面骨架

十一、结论

如果要用一句话把这四个概念串起来，可以这样记：

  • position：解决“放哪儿”
  • float：解决“浮到哪边并让文字绕着走”
  • flex：解决“一维怎么排”
  • grid：解决“二维怎么排”

再进一步总结成开发建议：

  • 整体布局优先考虑 flex / grid
  • 局部精确摆放用 position
  • 文字环绕场景再考虑 float

这样理解之后，它们就不会再混成一团了。

avatar
文章
阅读
粉丝