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

什么是 FC

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

BFC

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

BFC 的特性：

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

BFC 的创建方式：

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

BFC 的应用场景：

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

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

IFC 的创建方式：

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

IFC 的应用场景：

1. 实现水平居中：当需要将一个元素水平居中时，可以通过创建 IFC 来实现。例如，将一个元素设置为 inline-block，然后设置其父元素的 text-align 属性为 center。
2. 实现垂直居中：当需要将一个元素垂直居中时，可以通过创建 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 的特性：

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

GFC 的创建方式：

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

GFC 的应用场景：

1. 实现网格布局：当需要将一个元素进行网格布局时，可以通过创建 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 的特性：

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

FFC 的创建方式：

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

FFC 的应用场景：

1. 实现弹性布局：当需要将一个元素进行弹性布局时，可以通过创建 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;
}

总结：

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