前端什么是BFC？

块格式化上下文（Block Formatting Context，BFC）

BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

MDN

常用BFC触发条件：
　　【1】根元素，即HTML元素
　　【2】float的值不为none
　　【3】overflow的值不为visible
　　【4】display的值为inline-block、table-cell、table-caption
　　【5】position的值为absolute或fixed

BFC常用使用场景：
　　【1】不和浮动元素重叠
　　【2】清除元素内部浮动
　　【3】防止垂直 margin 重叠（）
　　【4】相邻Box水平方向margin重叠
　　【5】嵌套元素的margin重叠

BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置（不设置浮动，设置浮动那肯定是 左右一行排列了）。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的）

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）

4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响，外面的也不受BFC区域里面的影响（这个挺重要的，设置的浮动的元素，脱离了文档流，正常的相邻的元素会跑到它下面（靠左）。设置成BFC，自己独成一块，不会跑到它下面，而是保持洁身自好，自己依然占一块。）

6.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素，又拉回来了，但保持了浮动的特点。）