前端面试题之BFC

定义

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高度时，浮动元素也参与计算