一、什么是FC、BFC
FC：格式化上下文（Formatting Context），其实指的是一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。
FC又分为BFC、IFC、GFC与FFC，这里只讲BFC。
BFC: 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 (出自MDN)
BFC用来生成一个隔离的空间、清除内部元素的相互影响。
二、BFC的生成条件：
- 根元素或包含根元素的元素
- 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table） -
overflow值不为visible的块元素 -
display值为flow-root的元素 -
contain值为layout、content或strict的元素 - 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不为auto，包括 ``column-count为1） -
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
以上较为常见的有overflow:hidden、float:left/right、position:absolute与display: flex。也就是说，当满足上诉其中的一个或多个条件时，就代表了该元素已经创建了一个BFC了。
三、BFC的规范
- 内部的盒子会在垂直方向，一个个地放置；
- 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
- 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float重叠；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
- 计算BFC的高度时，浮动元素也参与计算。
四、BFC可以用来干什么
1. 利用BFC避免外边距折叠
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠遵循如下规则：
* 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
* 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
* 两个外边距一正一负时，折叠结果是两者的相加的和。
举个栗子：
当两个盒子处于同一个BFC时，外边距会发生重叠现象
.demo1, .demo2 {
height: 100px;
width: 100px;
background-color: red;
margin-top: 20px;
margin-bottom: 10px;
}
.demo2 {
background-color: lightblue;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
外边距折叠
解决方式：
使两者不处于同一个BFC中即可。
新建BFC
2. 防止发生因浮动而产生的高度塌陷问题
当一个元素属性为浮动时，会脱离标准文档流（也就是所谓的"脱标"），导致它的父元素计算高度时无法计算到浮动的元素。
举个栗子：
当父元素box不是BFC时，无法计算出浮动元素的高度，导致content(内容)无法被撑开。
.box {
background-color: skyblue;
}
.demo1 {
height: 100px;
width: 100px;
background-color: rgba(0,0,0, 0.1);
float: left;
}
<div class='box'>
<div class='demo1'></div>
</div>
子元素浮动
解决方式：
根据上述的BFC规范的最后一点可以看出，可以通过生成BFC(方法参考上述的BFC生成条件，这里使用display: flow-root作为栗子)来解决浮动时高度无法被计算的问题。
.box {
background-color: skyblue;
display: flow-root; //different，无副作用，适合在父元素使用
}
.demo1 {
height: 100px;
width: 100px;
background-color: rgba(0,0,0, 0.1);
float: left;
}
<div class='box'>
<div class='demo1'></div>
</div>
通过BFC来清除浮动影响
3. 解决浮动时元素重叠
刚才上面有讲到：浮动会产生‘脱标’。脱标会导致覆盖标准文档流的元素上，因此会发生元素重叠的现象。
举个栗子：
当我们在一个元素中放置了一个浮动元素和一个普通元素时，浮动元素会被置于普通元素中。
.demo1 {
height: 100px;
width: 100px;
float: left;
background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
height: 200px;
width: 200px;
background-color: skyblue;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
元素重叠
解决办法：
由上面的规则（BFC的区域不会与float重叠）可得，为非浮动元素建立一个BFC就可以避免此情况发生。
.demo1 {
height: 100px;
width: 100px;
float: left;
background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
height: 200px;
width: 200px;
background-color: skyblue;
overflow: auto;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
通过创建BFC来解决重叠
网友评论