共计 1018 个字符，预计需要花费 3 分钟才能阅读完成。
定义
BFC(Block formatting context)直译为 ” 块级格式化上下文 ”，能够了解为一个独立的区域，不受外界烦扰
合成
BFC = Box + Formatting context Box是 CSS 布局的根本单位，一个页面由很多个 Box 组成，依据 display 属性，又分为 block-level box，其display 为block,list-item,table；另一个为 inline-level box，其display 为inline,inline-block,inline-table
Formatting Context是 W3C 标准中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规定，它决定了其子元素将如何定位，以及和其余元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称 BFC)和 Inline formatting context (简称 IFC)。
BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
布局规定
- 外部元素会在垂直方向搁置
- 元素垂直方向的间隔由
margin决定 - BFC 的区域不会与
float box重叠 - BFC 是页面上的一个独立容器，容器内子元素不会影响里面的元素，也不受里面影响
- 计算 BFC 高度时，浮动元素也参加计算
造成条件
- 浮动
- 相对或者固定定位
display为inline-block/table-cell/flex/inline-flex/table-caption- 设置了
overflow
利用场景
margin 重叠
两个相邻的元素同时设置了 margin 时，之间的 margin 会重叠
如果想要它不重叠，给第二个 P 包一个 div，并将div 的overflow:hidden造成一个BFC
这个利用场景比拟少，大多数状况下布局的时候其实是心愿它重叠的
一个常常遇到的状况，两个 div 嵌套，给外面的 div 设置 margin 后，里面的 div 也呈现了 margin, 因为两个div 之间产生了 margin 重叠，重叠的后果会使 margin 比拟小的 div 变成与另外一个 div 统一的margin
解决办法：把外层的 div 变成 BFC 即可
自适应两栏布局
基于 BFC 的区域不会与 float box 重叠 的个性，能够将左侧栏float:left，而后右侧栏变为BFC
革除浮动
基于 计算 BFC 高度时，浮动元素也参加计算
