CSS面试中经常会问到BFC，对于不知道的同学会觉得很难，了解之后其实很简单

什么是BFC

BFC（Block Formatting Context），即块级格式化上下文，BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

BFC形成条件：

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

BFC渲染规则：

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

应用场景

• 防止margin重叠（塌陷）

  对于同一个BFC的两个相邻的盒子margin会发生重叠，大小是最大的margin 以下这段代码中的两个p元素同属于一个BFC，之间的margin是100px

  防止margin重叠，就要将其置于两个BFC中，可以这样解决：

  

• 清除内部浮动 效果图如下（可以看到因为浮动，.box的高度不包含.fl的高度，高度为0）：

我们可以将.box触发为BFC,计算高度时，浮动元素也会参与计算

给.box添加overflow:hidden属性：

最后效果如下：

• 自适应多栏布局 这里举个两栏的布局

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

效果如下：