BFC

一、BFC是什么

BFC(box formatting context)，要了解BFC是什么需要先理解box和formatting context的概念。

box：css布局的基本单位

一个页面就是由多个box组成的。元素的类型和display属性决定了box的类型，不同类型的box会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此box内的元素会以不同的方式渲染。
盒子类型：

• block-level box：display为block,list-item,table的元素会生成block-level box，并参与BFC
• inline-level box：display为inline，inline-block，inline-table的元素会生成inline-level box，并参与IFC

formatting context

css2.1的一个概念，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见的就是BFC和IFC，css3新增了GFC和FFC。

BFC（块级格式化上下文）

它是一个独立的渲染区域，只有block-level box参与，规定了内部box如何布局，并且这个区域与外部毫不相干

BFC特性

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

二、哪些元素会生成BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block，table-cell，table-caption，flex，inline-flex
• overflow不为visible

三、BFC常用作用

1. 自适应两栏布局
2. 清除浮动
   因为计算BFC的高度时，浮动元素也参与计算
   所以在浮动元素的父容器形成BFC可以撑起父容器高度
3. margin合并
   当两个相邻元素产生margin合并时，对其中一个生成BFC可以解决

其他参考

https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html