BFC 块级格式化上下文

BFC(块级格式化上下文 block formatting context)

它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC 特点

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。

BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。

计算BFC的高度时，浮动元素也被计算在内。

垂直方向上，自上而下排列，和文档流的排列方式一致。

生成BFC的触发条件

1.根元素 html

2.float属性不为none

3.position为absolute或者fixed

4.display 值为：inline-block、table-cell、table-caption、flex、inline-flex等

5.overflow不为visible(默认值) ，hidden、auto、scroll。

BFC的作用

（1）解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。

（2）导致外边距重叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。

计算原则：

折叠合并后外边距的计算原则如下：

如果两者都是正数，那么就去最大者

如果是一正一负，就会正值减去负值的绝对值

两个都是负值时，用0减去两个中绝对值大的那个

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。

（3）创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。