BFC及其如何工作
大家好，我是IT修真院郑州分院，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：
BFC及其如何工作？
一、背景介绍
什么是Box和Formatting Context
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 box 组成的。 任何被渲染的元素都属于一个 box ，设置元素的display 属性，决定了这个 Box 的类型是block还是inline。
格式化上下文( Formatting Context )是决定如何渲染文档的容器，它包括:
块级格式化上下文( Block formatting context )( BFC )
行内格式化上下文( Inline formatting context ) ( IFC )
自适应格式化上下文( Flex Formatting Context )( FFC )
网格布局格式化上下文(GridLayout Formatting Context)(GFC)
不同类型的 Box， 会参与不同的Formatting Context，因此Box内的元素就会以不同的方式渲染。
二、知识剖析
让我们看看有哪些盒子：
block-level box(块级盒元素）:display 属性为 block, list-item, table 的元素、元素本身为块级元素的元素(如div），会生成 block-level box。并且参与 block fomatting context（块级格式化上下文）
inline-level box（行级盒元素）:display 属性为 inline, inline-block, inline-table 的元素、元素本身为行级元素的元素（如span），会生成 inline-level box。并且参与 inline formatting context（行级格式化上下文）；
run-in box css3里加入的属性，在这里就不多介绍了；
BFC布局规则
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、 BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
三、常见问题
问题:有哪些方式能够触发BFC模式呢？
解决方案
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-blcok、table-cell、table-caption、flex、inline-flex
5、overflow不为visible
四、BFC的应用
1、自适应两栏布局
.aside{
width:100px;
height:150px;
float:left;
background:#f66;
}
.main{
height:200px;
background:#fcc;
}
上面中的例子我们可以看出，每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
因此，虽然存在浮动的元素，但main的左边依然会与包含块的左边相接触。
为main加入触发BFC的条件overflow：hidden，就可以实现两栏布局了。
2、清除内部浮动
.par{
overflow:hidden;
border:5px solid#fcc;
width:300px;
}
.child{
border:5px solid#f66;
width:100px;
height:100px;
float:left;
}
根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算
为了清除内部浮动，我们可以触发.par生成BFC，那么.par在计算高度时，.par内部的浮动元素也会参与计算.
3、防止margin重叠
.top{
display:inline-block;
width:100px;
height:100px;
margin:50px;
background:#fcc;
}
.down{
width:100px;
height:100px;
margin:30px;
background:#fcc;
}
这个例子让top或者down任意一个触发BFC，就可以防止垂直方向上的margin重叠。
五、拓展思考
IFC是如何工作的？
答：IFC的line box(线框)高度是由其包含行内元素中最高的实际高度来计算的， （不受到竖直方向的padding/margin影响），IFC中的line box一般左右都紧贴整个IFC， 但是会因为浮动float元素而扰乱。float元素会位于IFC与line box之间，使得line box宽度缩短。 同个IFC下的多个line box高度会不同。IFC中不能有块级元素，当插入块级元素时，会产生两个匿名块 与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。作用：水平居中：当一个 块要在环境中水平居中时，设置其为inline-block就会在外层产生IFC，通过text-align就可以使其水平居中。 垂直居中：创建IFC，用其中一个元素撑开父元素的高度，然后设置vertical-align：middle，其他行内元素 就可以在父元素中处置居中了。
六、参考文献
参考一：BFC神奇的背后
参考二：张鑫旭博客
七、视频链接
undefined_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
