关于BFC

一、什么是BFC？

BFC为Block formatting context的缩写，即“块级格式化上下文”。通俗来讲，它就是一个“隔离”起来的区域，外部的内容、构造与这个区域毫不相干，即它是一个独立的渲染区域，它规定了内部的Block-level Box（块级元素）如何布局。

 

二、BFC的布局规则

1. 内部的Box会在垂直方向一个接一个地放置。

2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的垂直排列的Box的margin会发生重叠，并按照最大的margin值显示，即上面元素的margin-bottom值与下面元素的margin-top值并不是相加来显示，而是按照两者中最大的来显示。

3. 元素的左边距的边缘会与其包含块的左边框部分相接触。

4. BFC的区域不会与浮动元素的区域重叠

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。

6. 计算BFC的高度时，浮动元素也参与计算。例如，对于子元素浮动引起的高度塌陷问题，当给父元素添加overflow:hidden;就触发了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

 

四、 BFC的应用

1. 自适应两栏布局

2. 清除内部浮动

3. 防止margin上下重叠