什么是BFC

1. BFC定义

• BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2. 触发BFC

• 并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。
  • 触发BFC的条件
    • body根元素
    • 设置浮动，不包括none
    • 设置定位，absoulte或者fixed
    • 行内块显示模式，inline-block
    • 设置overflow，即hidden，auto，scroll
    • 表格单元格，table-cell
    • 弹性布局，flex

3. 利用BFC解决问题

• BFC有一个特点是：每一个BFC区域都是相互独立，互不影响的

3.1 解决外边距的塌陷问题(垂直塌陷)

• 开发中，前端的布局手段，离不开外边距margin，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。

  • 代码给两个div盒子，都添加了四个方向的margin，可是，盒子之间的距离，现在却只有100px。两段margin重叠到了一块，互相影响。我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。

3.2 利用BFC解决包含塌陷

• 当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑

• 原本，正确的显示方式，应该是粉色盒子与红色盒子的顶部距离为50px，但是由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这个时候，就可以触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。

3.3 当浮动产生影响的时候，可以利用BFC来清除浮动的影响

• 以上代码表示，一个没有设置高度的父盒子，包含着七个子元素。如果此时，所有的子元素都浮动的话。

当所有的子元素都浮动了，这个时候，父盒子失去了原有的高度，这就是浮动的影响。这个时候，同样也可用BFC的机制，来清除浮动带来的影响。使用BFC，将所有的浮动元素包裹起来。

3.4 BFC可以阻止标准流元素被浮动元素覆盖

• 以上情况，红色盒子浮动，蓝色盒子时标准流，默认情况下，浮动元素覆盖了标准流元素。但是，如果将蓝色盒子的BFC触发，那么情况将有所变化。

• 当蓝色盒子触发了BFC之后，浮动元素再也不能覆盖它了，而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应

4. 总结

• 1.一个BFC区域只包含其子元素，不包括其子元素的子元素。
• 2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
• 3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。