27、什么是BFC？

BFC:(Block formatting context) ,翻译为”块级格式化上下文”

它是一个独立的渲染区域，只有block-level box参与，规定内部的Block-level Box如何布局，并且该区域与外部区域毫不相干。

 

哪些元素会产生BFC：

1、html根元素

2、float属性不为none

3、position为absolute或fixed

4、display为inline-block,table-cell,table-caption,flex, inline-flex

5、overflow不为visible

 

BFC 主要的作用是：

1. 清除浮动
2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题（margin）

 

BFC布局规则:

1、内部的Box会在垂直方向上，一个接一个的放置

2、Box的垂直方向距离由margin决定。同一个BFC的相邻Box的margin会发生重叠。（按照最大的margin值显示）

3、每个元素的margin box的左边，与包含块border box的左边相接触

4、BFC区域不会与float box重叠（可以自适应两栏布局）

5、BFC是隔离的独立容器，容器里的子元素不会影响到外面的元素

6、计算BFC高度时，浮动元素也参与计算（可以用来清除浮动）

 

参考链接：https://blog.csdn.net/gongzhuxiaoxin/article/details/52218266