Css的FC格式化上下文之一文打尽，BFC、IFC、GFC、FFC详解

什么是 FC

FC 是 Formatting Context 的缩写，直译为格式化上下文，是 CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见的 FC 有 BFC、IFC、GFC 和 FFC。

BFC

BFC 是 Block Formatting Context 的缩写，直译为块级格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC 是一个独立的容器，它内部的元素不会影响到外部元素的布局。

BFC 的特性：

BFC 内部的元素会在垂直方向上依次排列，并且不会发生重叠。
BFC 内部的元素不会影响到外部元素的布局。
BFC 内部的元素可以设置 margin，并且不会发生外边距折叠。
BFC 内部的元素可以设置 float，并且不会影响到外部元素的布局。

BFC 的创建方式：

设置元素的 display 属性为 block、inline-block、flex、grid 或 table。
设置元素的 position 属性为 absolute 或 fixed。
设置元素的 float 属性为 left 或 right。
设置元素的 overflow 属性为 hidden、auto 或 scroll。

BFC 的应用场景：

清除浮动：当父元素内部有浮动元素时，父元素的高度无法被正确计算，可以通过创建 BFC 来清除浮动。
防止外边距折叠：当两个相邻的块级元素都有 margin 时，可以通过创建 BFC 来防止外边距折叠。
实现两栏布局：可以通过创建 BFC 来实现两栏布局，其中一栏固定宽度，另一栏自适应宽度。
实现圣杯布局和双飞翼布局：可以通过创建 BFC 来实现圣杯布局和双飞翼布局，其中一栏固定宽度，另一栏自适应宽度。

清除浮动

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  overflow: hidden; /* 创建 BFC */
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}

.box2 {
  width: 200px;
  height: 100px;
  background-color: blue;
  overflow: hidden; /* 创建 BFC */
}

防止外边距折叠

<div class="container">
  <div class="wrapper">
    <div class="box1">Box 1</div>
  </div>
  <div class="wrapper">
    <div class="box2">Box 2</div>
  </div>
</div>

.wrapper {
  overflow: hidden;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-top: 20px;
}

实现两栏布局

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

.container {
  overflow: hidden;
  /* BFC包含浮动元素 */
}

.sidebar {
  width: 200px;
  background-color: red;
  float: left;
  margin-bottom: -9999px;
  /* 负margin技术 */
  padding-bottom: 9999px;
  /* 补偿负margin */
}

.content {
  margin-left: 220px;
  background-color: blue;
  margin-bottom: -9999px;
  /* 负margin技术 */
  padding-bottom: 9999px;
  /* 补偿负margin */
}

实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是常见的网页布局方式，它们都可以通过创建 BFC 来实现。

<div class="container">
  <div class="main">
    <div class="content">Main Content</div>
  </div>
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

.container {
  overflow: hidden;
}

.main {
  float: left;
  width: 100%;
  height: 300px;
}

.content {
  margin: 0 200px;
  background-color: blue;
  height: 300px;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: red;
  height: 300px;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: green;
  height: 300px;
}

IFC

IFC 是 Inline Formatting Context 的缩写，直译为内联格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其内部的内联元素将如何定位，以及和其他元素的关系和相互作用。IFC 是一个独立的容器，它内部的元素不会影响到外部元素的布局。

IFC 的特性：

IFC 内部的元素会在水平方向上依次排列，并且不会发生重叠。
IFC 内部的元素不会影响到外部元素的布局。
IFC 内部的元素可以设置 margin、padding、border，并且不会发生外边距折叠。
IFC 内部的元素可以设置 float，并且不会影响到外部元素的布局。

IFC 的创建方式：

设置元素的 display 属性为 inline、inline-block、inline-table 或 inline-flex。
设置元素的 position 属性为 absolute 或 fixed。
设置元素的 float 属性为 left 或 right。
设置元素的 overflow 属性为 hidden、auto 或 scroll。

IFC 的应用场景：

实现水平居中：当需要将一个元素水平居中时，可以通过创建 IFC 来实现。例如，将一个元素设置为 inline-block，然后设置其父元素的 text-align 属性为 center。
实现垂直居中：当需要将一个元素垂直居中时，可以通过创建 IFC 来实现。例如，将一个元素设置为 inline-block，然后设置其父元素的 line-height 属性为元素的高度。

水平居中

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  text-align: center; /* 创建 IFC */
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

垂直居中

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  height: 300px;
  line-height: 300px;
  background-color: #e3f2fd;
  text-align: center;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #2196f3;
  color: white;
  line-height: 100px;
  vertical-align: middle;
}

GFC

GFC 是 Grid Formatting Context 的缩写，直译为网格格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其内部的网格元素将如何定位，以及和其他元素的关系和相互作用。GFC 是一个独立的容器，它内部的元素不会影响到外部元素的布局。

GFC 的特性：

GFC 内部的元素会在网格中排列，并且不会发生重叠。
GFC 内部的元素不会影响到外部元素的布局。
GFC 内部的元素可以设置 margin、padding、border，并且不会发生外边距折叠。
GFC 内部的元素可以设置 grid 属性，并且会按照网格布局规则进行排列。

GFC 的创建方式：

设置元素的 display 属性为 grid 或 inline-grid。

GFC 的应用场景：

实现网格布局：当需要将一个元素进行网格布局时，可以通过创建 GFC 来实现。例如，将一个元素设置为 grid，然后设置其 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: grid; /* 创建 GFC */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.box {
  background-color: red;
}

FFC

FFC 是 Flex Formatting Context 的缩写，直译为弹性格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其内部的弹性元素将如何排列，以及和其他元素的关系和相互作用。FFC 是一个独立的容器，它内部的元素不会影响到外部元素的布局。

FFC 的特性：

FFC 内部的元素会在弹性容器中排列，并且可以按照弹性布局规则进行排列。
FFC 内部的元素不会影响到外部元素的布局。
FFC 内部的元素可以设置 margin、padding、border，并且不会发生外边距折叠。
FFC 内部的元素可以设置 flex 属性，并且会按照弹性布局规则进行排列。

FFC 的创建方式：

设置元素的 display 属性为 flex 或 inline-flex。

FFC 的应用场景：

实现弹性布局：当需要将一个元素进行弹性布局时，可以通过创建 FFC 来实现。例如，将一个元素设置为 flex，然后设置其 flex-direction 属性来定义主轴的方向。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: flex; /* 创建 FFC */
  flex-direction: row; /* 定义主轴的方向 */
}

.box {
  background-color: red;
  padding: 10px;
}

总结：

BFC：块级格式化上下文，它决定了块级元素在页面中的布局方式。BFC 内部的元素不会影响到外部元素的布局，并且可以设置 margin、padding、border，并且不会发生外边距折叠。BFC 的创建方式有：设置元素的 display 属性为 block、inline-block、table、table-cell、table-caption、flex、inline-flex、grid、inline-grid。
IFC：内联格式化上下文，它决定了内联元素在页面中的布局方式。IFC 内部的元素会在同一行中排列，并且可以设置 margin、padding、border，并且不会发生外边距折叠。IFC 的创建方式有：设置元素的 display 属性为 inline、inline-block、inline-table。
GFC：网格格式化上下文，它决定了网格元素在页面中的布局方式。GFC 内部的元素会在网格中排列，并且可以设置 margin、padding、border，并且不会发生外边距折叠。GFC 的创建方式有：设置元素的 display 属性为 grid、inline-grid。
FFC：弹性格式化上下文，它决定了弹性元素在页面中的布局方式。FFC 内部的元素可以设置 flex 属性，并且会按照弹性布局规则进行排列。FFC 的创建方式有：设置元素的 display 属性为 flex 或 inline-flex。

资源下载

下载价格免费

注意：本网站资源属于虚拟产品，不支持退款。请谨慎购买！购买后资源无法下载，请联系客服QQ：844475003，微信号：th844475003。

原文链接：https://code.ifrontend.net/archives/705，转载请注明出处。

什么是 FC

BFC

清除浮动

防止外边距折叠

实现两栏布局

实现圣杯布局和双飞翼布局

IFC

水平居中

垂直居中

GFC

FFC

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Css的FC格式化上下文之一文打尽，BFC、IFC、GFC、FFC详解

什么是 FC

BFC

清除浮动

防止外边距折叠

实现两栏布局

实现圣杯布局和双飞翼布局

IFC

水平居中

垂直居中

GFC

FFC

猜你喜欢

React强大且灵活hooks库——ahooks入门实践之开发调试类hook（dev）详解

React强大且灵活hooks库——ahooks入门实践之高级类hook（advanced）详解

React强大且灵活hooks库——ahooks入门实践之DOM类hook（dom）详解

React强大且灵活hooks库——ahooks入门实践之副作用类hook（effect）详解

React强大且灵活hooks库——ahooks入门实践之状态管理类hook（state）详解

React强大且灵活hooks库——ahooks入门实践之生命周期类hook（lifecycle）详解

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部