1、什么是BFC？
BFC（Block Formatting Context）直译为"块级格式化上下文"，是 Web 页面的可视化 CSS 渲染中的一部分，是布局过程中生成块级盒子的区域，也是浮动元素和其他元素的交互限定区域。
2、怎样创建BFC？
根元素或者包含根元素的元素（ html 元素会作为一个 BFC ），意味着 html 元素中的各个元素都在同一 BFC
浮动元素（元素的 float 不为 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（或者元素的 display 为 table-cell）表格标题（或元素的 display 为 table-caption）匿名表格单元格元素（ HTML 中的 table、row、thead、tbody、tfoot 或者 display 为table、table-row、table-row-group、table-header-group、table-footer-group）overflow 不为 visible 的元素弹性元素（display 为 flex 或者 inline-flex 元素的直接子元素）网格元素（display 为 grid 或者 inline-grid 元素的直接子元素）多列容器（元素的 column 或者 column-width 不为 auto，包括 column-count 为 1）
BFC 是一个独立的布局环境，其中元素的布局是不受外界的影响。
BFC 渲染规则
内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边， 与包含块border
box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算
BFC 的应用
1. 外边距溢出和外边距合并
常规布局中，BFC 的盒子会在垂直方向上排列，两者之间的间隔由各自的外边距决定，但是不是两者之和。
外边距溢出
.container {
background-color: #cccccc;
}
.item {
margin: 10px 0;
background-color: #ff66aa;
}
// 为了不让外边距溢出，我们只需要创建一个 BFC 即可
// 外边距合并
.container {
background-color: #cccccc;
overflow: hidden;
}
.item {
margin: 10px 0;
background-color: #ff66aa;
}
// Item 1 和 Item 2 之间的间隔并不是 10px + 10px，而是 10px。
// 我们想要间隔变为 20px ，只需要将 Item1 或者Item 2 创建在一个
// 新的 BFC 中。
.container {
background-color: #cccccc;
overflow: hidden;
}
.item-container {
overflow: hidden;
}
.item {
margin: 10px 0;
background-color: #ff66aa;
}
2. 解决高度塌陷问题
浮动元素会脱离文档流，如果父元素的高度没有或者 auto ，那么父元素的高度不会被撑开。一般我们用伪元素来 clear: both来清楚浮动。
.container {
background-color: #cccccc;
}
.item {
float: left;
width: 100px;
height: 100px;
background-color: #ff66aa;
}
// 只需要给父元素创建新的 BFC 则可以撑开高度。
.container {
background-color: #cccccc;
overflow: hidden;
}
.item {
float: left;
width: 100px;
height: 100px;
background-color: #ff66aa;
}
3. 左边定宽右边自适应
.container {
background-color: #cccccc;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #ff66aa;
}
.right {
overflow: hidden;
height: 200px;
background-color: #2222aa;
}
IFC是什么？
IFC（Inline Formatting Contexts）直译为"内联格式化上下文"，IFC 的 line box（框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。
符合以下条件即会生成一个IFC
块级元素中仅包含内联级别元素
形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
IFC渲染规则
子元素水平方向横向排列，并且垂直方向起点为元素顶部子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】在垂直方向上，子元素会以不同形式来对齐（vertical-align）能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定IFC中的“line box”一般左右边贴紧其包含块，但 float 元素会优先排列IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个 line box 高度可能会不同当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align属性值来决定当一个“inline box”超过父元素的宽度时，它会被分割成多个 boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素
IFC 的应用
只计算水平方向的 padding、margin、border
文本一
文本二
.container {
background-color: #cccccc;
}
.text {
margin: 20px;
background-color: #ff66aa;
}
元素水平垂直居中
这是一个垂直水平居中的块
.container {
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: #cccccc;
}
p {
display: inline-block;
width: 120px;
height: 90px;
vertical-align: middle;
line-height: normal;
background-color: #333333;
color: #ffffff;
}