定义

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中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

布局规定

  1. 外部元素会在垂直方向搁置
  2. 元素垂直方向的间隔由margin决定
  3. BFC的区域不会与float box重叠
  4. BFC是页面上的一个独立容器，容器内子元素不会影响里面的元素，也不受里面影响
  5. 计算BFC高度时，浮动元素也参加计算

造成条件

  1. 浮动
  2. 相对或者固定定位
  3. display为inline-block/table-cell/flex/inline-flex/table-caption
  4. 设置了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高度时，浮动元素也参加计算