BFC、Flex box,一文带你探索CSS布局定位的奥秘

时间 2020-05-30

标签 bfc flex box 一文探索 css 布局定位奥秘栏目 Flex 繁體版

原文原文链接

相信全部前端开发者的入门课，都是从div和css开始的，CSS做为基础中的基础，除了让页面由于样式而变得丰富美观外，更是决定了页面元素的排列布局，然而不少时候，当咱们对CSS只知其一;不知其二，咱们总会在开发中遇到元素不能按照咱们所想的那样呈现出来的问题，因此本文就来系统的讲讲CSS的布局定位。css

盒模型

首先，咱们来了解构成页面的元素。在CSS中，咱们的每一个元素本质上都是一个盒子，盒模型决定了一个元素的大小和他所占大小，盒模型由如下几部分组成：html

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

那么元素的大小到底取决于什么呢？目前有两种盒模型：W3C盒模型和IE盒模型，两种盒模型的计算方法不一样，在CSS中，咱们能够用box-sizing指定使用哪一种方式计算：前端

content-box（W3C盒模型）：盒子宽高 = 内容宽高（content）
border-box（IE盒模型）：盒子宽高 = 内容宽高（content） + 内边距（padding）+ 边框（border）

看个例子：css3

// W3C盒模型
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    background-color: yellowgreen;
  }
</style>

<div class="box"></div>
复制代码

效果：chrome

// IE盒模型
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    background-color: yellowgreen;
    box-sizing: border-box;
  }
</style>

<div class="box"></div>
复制代码

效果：浏览器

因此咱们发现，无论是哪种盒模型，margin的长度都不会被包含在元素的宽高里，可是magin将决定元素在其父元素中的位置。

`display` 属性

display用于定义创建布局时元素生成的显示框类型，会影响到兄弟元素之间的布局，他的取值有如下几种：bash

none：此元素不会被显示。
block：此元素将显示为块级元素，此元素先后会带有换行符。
inline：默认值。此元素会被显示为内联元素，元素先后没有换行符。
inline-block：行内块元素。
list-item：此元素会做为列表显示。
table相关：此元素会被显示为表格或表格元素。
flex：弹性盒子。
run-in：此元素会根据上下文做为块级元素或内联元素显示。

下面咱们将对inline-block，flex，run-in这几个属性作详细讲解。布局

inline-block

inline-block和float，flex并称实现元素行内显示的“三巨头”，相比较flex的丰富属性，inline-block就略显朴素，使用也十分简单，看起来彷佛彻底不值得对它进行详细介绍，但不知道大家在使用的时候是否也踩过那些inline-block的坑，因此这里咱们来说讲inline-block的必坑指南post

避坑指南一：行内元素间隙

咱们先来看一个例子：学习

<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

.content {
  background-color: yellow;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}
复制代码

实现的效果：

咱们会发现，几个行内元素之间出现了的空隙，这个空隙其实是由于咱们的HTML书写致使的，咱们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，对于多个连续的空白符浏览器会自动将其合并成一个，因此就产生了所谓的间隙。想要解决这个间隙，咱们能够给父元素设置 font-size:0。

<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

.content {
  background-color: yellow;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}
复制代码

效果：

避坑指南二：高度塌陷，对齐问题

这个问题，是在开发的时候偶然碰见的，话很少说，先看看这两个例子：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell"></div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: #eee;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  width: 100px;
  height: 50px;
  font-size: 16px;
  background-color: #666;
  color: #fff;
}
复制代码

效果：

在这个例子里，咱们发现有字的行内块元素和没有字的行内块元素显示不在同一高度。而后咱们再看另外一个例子：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell" id="spec">有内容</div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: #eee;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  color: #333;
}
.active {
  border: 2px solid #E20000;
  color: #E20000;
}

let spec = document.getElementById("spec");
let flag = false;
spec.addEventListener("click", () => {
  flag = !flag;
  if (flag) {
    spec.classList.add('active')
  } else {
    spec.classList.remove('active')
  }
});
复制代码

效果：

咱们会发现，当中间的元素添加了边框后，三个行内元素都发生了上下抖动，那是不是由于他们的高度发生了变化呢？那么咱们就来测量一下：

测量结果显示，这三个元素的高度同样，并无发生改变，那么到底是什么缘由致使了行内元素高度塌陷、上下抖动的呢？

其实形成这一结果的是vertical-align属性。inline-block做为行内块元素，也遵循行内元素的vertical-align垂直对齐方式，vertical-align的取值有如下几种：

baseline：将元素的基线与父元素的基线对齐。
sub：将元素的基线与其父元素的下标基线对齐。
super：将元素的基线与其父代的上标 - 基线对齐。
text-top：将元素的顶部与父元素的字体顶部对齐。
text-bottom：将元素的底部与父元素的字体的底部对齐。
middle：将元素的中间与基线对齐加上父元素的x-height的一半。
top：将元素的顶部和其后代与整行的顶部对齐。
bottom：将元素的底部和其后代与整行的底部对齐。
<length>：将元素的基线对准给定长度高于其父元素的基线。
<percentage>：像<长度>值，百分比是line-height属性的百分比。

在默认状况下，会根据baseline进行定位，文字的定位不一样，最终致使了整个块元素的高度塌陷。想要解决这一问题，咱们只需将vertical-align设置为top，以下：状况一：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell"></div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: #eee;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 50px;
  font-size: 16px;
  background-color: #666;
  color: #fff;
}
复制代码

状况二：

<div class="content">
  <div class="cell">有内容</div>
  <div class="cell" id="spec">有内容</div>
  <div class="cell">有内容</div>
</div>

.content {
  background-color: #eee;
  font-size: 0;
  width: 350px;
  height: 100px;
}
.cell {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  color: #333;
}
.active {
  border: 2px solid #E20000;
  color: #E20000;
}

let spec = document.getElementById("spec");
let flag = false;
spec.addEventListener("click", () => {
  flag = !flag;
  if (flag) {
    spec.classList.add('active')
  } else {
    spec.classList.remove('active')
  }
});
复制代码

run-in

run-in这个属性值是在css3中被引入的，官方对他的描述是:

此元素会根据上下文做为块级元素或内联元素显示。

这个说法让人会有些摸不着头脑，因此咱们直接来看个例子。

在设计文章样式的时候，也许你遇到过须要在一行内显示一个标题和一段内容的场景，若是使用h标签和p标签咱们可能获得的是下面这种结果：

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>
复制代码

当咱们将 h标签的display属性变成 run-in时，结果就变成了这样。

h1 {
  display: run-in;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>
复制代码

为了更好的理解run-in，咱们把它和float，inline-block的布局效果作比较：

h1 {
  float: left;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>
复制代码

当使用float的时候，咱们发现左边的标题会占据多行，这和咱们的预期显然有些差距。

h1 {
  display: inline-block;
}

<div class="article">
  <h1>One Point.</h1><p>Here is the description.If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.</p>
</div>
复制代码

当使用inline-block的时候，当内容有多行，标题和内容不能在一行显示，如今咱们就可以明白 run-in究竟作了什么：

当该元素的下文是block时，该元素将表现为inline-block
当该元素的下文是inline-block时，该元素将表现为block

虽然这个属性看起来十分便利，可是这个属性已经被大多数浏览器舍弃了，这也是为何咱们平时听到的不是特别多的缘由，浏览器认为run-in破坏了HTML的表现，这些样式上的实现，应该经过CSS去调节。因此对于这个属性，你们作个了解就能够啦。

Flex box

Flex box多是目前用来作自适应用的最多的布局方式了，Flex使用的丰富，也为开发者提供了更便捷更可靠的布局。

容器属性

flex-direction

决定主轴的方向（即项目的排列方向）。取值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

决定了子元素如何换行。取值：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content

决定了项目在主轴上的对齐方式。取值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每一个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

align-items

决定了项目在交叉轴上如何对齐。取值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。+
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。

align-content

决定了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。取值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

子元素属性

order

决定项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

决定项目的放大比例，默认为0，即若是存在剩余空间，也不放大。

flex-shrink

决定项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。

flex-basis

决定在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

容许单个项目有与其余项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

注意点

设为 Flex 布局之后，子元素的float、clear和vertical-align属性将失效。

Float 浮动

在Flex box被普遍使用之前，咱们常常会利用float来实现块元素行内两端显示，它的使用也十分简单，float属性有如下几种取值：

none：默认值，没有浮动效果。
left：元素浮动到父元素左侧。
right：元素浮动到父元素右侧。
inherit：规定应该从父元素继承 float 属性的值。

float自己没有什么难度，可是设置了float会致使父元素的没法被撑开，margin失效，因此清除float也就成了开发必备知识。

清除浮动

原始效果：

<div class="content">
  <div class="cell spe1">块1</div>
  <div class="cell spe2">块2</div>
</div>

.content {
  background-color: #eee;
  font-size: 0;
  width: 350px;
}
.cell {
  font-size: 16px;
  background-color: #666;
  color: #fff;
}
.spe1 {
  width: 80px;
  height: 20px;
  float: left;
}
.spe2 {
  width: 80px;
  height: 30px;
  float: right;
}
复制代码

方法一：设置空元素

<div class="content">
  <div class="cell spe1">块1</div>
  <div class="cell spe2">块2</div>
  <div class="clr"></div>
</div>

.clr {
  clear: both;
}
复制代码

方法二：after伪元素

.content:after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}
复制代码

该方法也是利用clear:both来清除浮动，与方法一的区别在于，方法一添加了一个clear元素，而这一个是在元素内部增长一个相似于clear的效果，其中有几个注意点：

content：能够为空，也能够取任意值。
display：必须设置为block，不然在FF/chrome/opera/IE8下不能正常起做用。
visibility：设置为hidden是为了容许浏览器渲染它，可是不显示出来。

方法三：利用overflow:hidden属性

.content {
  overflow: hidden;
}
复制代码

经过设置overflow达到清除浮动效果，其原理是建立了一个BFC，有关BFC的知识，咱们会在后面章节里详细介绍。

最终效果：

`position` 定位

position属性决定了某个元素的定位方式，它的取值有如下几种：

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（所以会在此元素未添加定位时所在位置留下空白）。
absolute：元素会被移出正常文档流，并不为元素预留空间，经过指定元素相对于最近的非 static 定位祖先元素的偏移，来肯定元素位置。绝对定位的元素能够设置外边距（margins），且不会与其余边距合并。
fixed：元素会被移出正常文档流，并不为元素预留空间，而是经过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出如今的每页的固定位置。
sticky：元素根据正常文档流进行定位，而后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其余元素的位置。

在这些属性里，其中relative咱们称之为相对定位，absolute为绝对定位，fixed为固定定位，sticky为粘性定位，而这几个定位又能够区分为Normal flow（常规流）和Unnormal Flow（很是规流）。

Normal flow（常规流）

属于常规流的取值：

static
relative

常规流具有如下特性：

盒一个接着一个排列;
在块级格式化上下文里面，元素竖着排列；
在行内格式化上下文里面，元素横着排列;
对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，leftandright。即便有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

常规流里的元素属于格式上下文（formatting context），块元素和行内元素表现不一样会产生快格式上下文和行内格式上下文，也就是咱们常说的BFC和IFC。

BFC (Block Formatting Context)

BFC的建立方法:

根元素或其它包含它的元素。
浮动 (元素的float不为none)。
绝对定位元素 (元素的position为absolute或fixed)。
行内块inline-blocks(元素的 display: inline-block)。
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)。
overflow的值不为visible的元素。
弹性盒flex boxes(元素的display: flex或inline-flex)。

BFC的本质就是建立一个隔离的空间，他的具体效果以下：

内部的盒会在垂直方向一个接一个排列（能够看做BFC中有一个的常规流）。
处于同一个BFC中的元素相互影响，可能会发生margin collapse。
每一个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，不然相反)，即便存在浮动也是如此。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，考虑BFC所包含的全部元素，连浮动元素也参与计算。
浮动盒区域不叠加到BFC上。

对于上述效果，除了1和3，彷佛都让人有些摸不着头脑，那么就让咱们经过几个例子来仔细研究一下。

案例一：margin collapse

首先咱们来了解一下什么是外边距折叠（margin collapse）。在CSS中，两个或多个毗邻的普通流中的盒子（多是父子元素，也多是兄弟元素）在垂直方向上的外边距会发生折叠，这种造成的外边距称之为外边距折叠。

那么何时外边距会发生折叠呢？发生折叠须要知足这几种状况：

都属于普通流的Block box且参与到相同的BFC中
没有被padding、border、clear和line box分隔开都属于垂直毗邻盒子边缘：
1. 盒子的top margin和它第一个普通流子元素的top margin
1. 盒子的bottom margin和它下一个普通流兄弟的top margin
1. 盒子的bottom margin和它父元素的bottom margin
1. 盒子的top margin和bottom margin，且没有建立一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

下面让咱们来看看代码实例：

<div class="top"></div>
<div class="content">
  <div class="cell"></div>
  <div class="cell"></div>
</div>
<div class="foot">
  <div class="cell2"></div>
  <div class="spe"></div>
  <div class="cell2"></div>
</div>

.top {
  background-color: #60acfc;
  width: 100px;
  height: 50px;
}
.content {
  margin-top: 10px;
  background-color: #eee;
  width: 350px;
  margin-bottom: 10px;
}
.cell {
  margin-top: 20px;
  background-color: #5bc49f;
  height: 20px;
  margin-bottom: 30px;
}
.foot {
  background-color: #60acfc;
  width: 100px;
}
.spe {
  margin: 20px 0 30px;
}
.cell2 {
  height: 20px;
  background-color: #eee;
}
复制代码

效果：

.content和.cell的上边距折叠属于第一条，最终.content和.top之间的边距为20px。
.cell之间的边距折叠属于第二条，最终.cell之间的边距为30px。
.cell和.content的下边距折叠属于第三条，最终.content和.foot之间的边距为30px。
.spe本身的上下边距折叠属于第四条，最终.spe占据的间隔为30px。

如今咱们知道了margin collapse发生的状况，那咱们盖如何避免边距折叠呢？方法有如下几种：

浮动元素不会与任何元素发生折叠，也包括它的子元素。
建立了 BFC 的元素不会和它的子元素发生外边距折叠。
绝对定位元素和其余任何元素之间不发生外边距折叠，也包括它的子元素。
inline-block 元素和其余任何元素之间不发生外边距叠加，也包括它的子元素。
给常规流中的块级元素添加padding、border、clear属性。

案例二：BFC计算高度包含浮动盒

<div class="BFC">
  <div class="left"></div>
  <div class="right"></div>
</div>

.BFC {
  background-color: #eee;
}
.left {
  float: left;
  background-color: #60acfc;
  width: 100px;
  height:50px;
  opacity: 0.6;
}
.right {
  width: 150px;
  background-color: #5bc49f;
  height:30px;
}
复制代码

在咱们没有建立BFC的时候，父元素的高度不包含浮动元素高度。

.BFC {
  background-color: #eee;
  overflow: hidden;
}
复制代码

建立BFC后，父元素就会加上浮动元素高度，这个就是咱们在以前提到的清除浮动的方法之一。

实例三：BFC内部不受浮动元素影响

<div class="BFC content">
  <div class="left"></div>
  <div class="right BFC">
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

.BFC {
  overflow: hidden;
}
.content {
  background-color: #eee;
}
.left {
  float: left;
  background-color: #60acfc;
  width: 100px;
  height:50px;
  opacity: 0.6;
}
.right {
  width: 150px;
  background-color: #5bc49f;
  height:30px;
}
.cell {
  width: 20px;
  margin: 5px;
  background-color: #fff;
  height:20px;
  display: inline-block;
}
复制代码

效果：

从这个例子，咱们就能够理解，BFC布局规则里的第4和第6条：

BFC内部是一个独立区域，不会受到外部元素的影响。
BFC外部的浮动不会和BFC发生重叠。

IFC (Inline Formatting Context)

IFC由inline元素构成，它的布局规则是这样的：

高度由其包含行内元素中最高的实际高度计算而来。
IFC中的line box通常左右都贴紧整个IFC，可是会由于float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
同个ifc下的多个line box高度会不一样。
水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的高度由行高来决定。

那么IFC通常有什么用呢？

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，经过text-align则可使其水平居中。
垂直居中：建立一个IFC，用其中一个元素撑开父元素的高度，而后设置其vertical-align:middle，其余行内元素则能够在此父元素下垂直居中。

Unnormal Flow（很是规流）

属于很是规流的取值：

absolute
fixed
sticky

对于很是规流，由于他们脱离了正常的文档流，因此他们不会对正常流的元素形成影响，不少时候咱们都会配合z-index使用，前两种相信你们都不陌生，因此就再也不多作介绍啦，下面咱们来说讲sticky。

粘性定位（sticky)

粘性定位（sticky)能够被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，以后为固定定位。

<div class="content">
  <h1 class="title">我是一块内容</h1>
  <div class="sticky"></div>
  <div class="main"></div>
</div>

.content {
  background-color: #eee;
}
.title {
  color: #333;
}
.sticky {
  position: sticky;
  top: 0px;
  background-color: #60acfc;
  width: 100px;
  height:50px;
}
.main {
  width:150px;
  height: 900px;
}
复制代码

效果：

使用sticky布局的时候有几个注意点：

父级元素不能有任何overflow:visible之外的overflow设置。
父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度同样，没有粘滞效果。
同一个父容器中的sticky元素，若是定位值相等，则会重叠；若是属于不一样父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，造成依次占位的效果。
sticky定位，不只能够设置top，基于滚动容器上边缘定位；还能够设置bottom，也就是相对底部粘滞。若是是水平滚动，也能够设置left和right值。
z-index无效。

VFC

VFC，也就是Visual formatting context，虚拟格式上下文，他有BFC，IFC，GFC和FFC这几种类型，在前文中，咱们已经介绍了BFC，IFC，这里再简单介绍下GFC和FFC。

GFC

GFC(GridLayout Formatting Contexts)，"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会得到一个独立的渲染区域。

咱们能够经过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每个网格项目（grid item）定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢？首先一样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC

FFC(Flex Formatting Contexts)，"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。因此当咱们使用flex布局的时候，咱们就建立了一个FFC。

总结

至此，有关CSS布局和定位的知识就结束了，文中若有解释不到位的地方，欢迎你们评论指正。

参考连接：

W3C-Visual formatting model

Flex 布局（阮一峰）

学习 BFC