深入理解BFC

        BFC是前端CSS中的一个重要概念，也是面试的高频问题。

        相信很多学习前端的小伙伴也在各处搜集了很多关于BFC的资料和讲解，但是在阅读完大篇幅对BFC介绍之后可能还是不能够理解BFC到底是什么。本篇文章我将用代码和文字相结合的方式来帮助大家理解什么是BFC。

要理解BFC，我们需要弄明白三个问题。
1、什么是BFC？

2、BFC主要能够解决什么样的问题?

3、BFC怎么开启？

BFC的全称是Block Formating Context（块级格式化上下文），BFC是一块独立的渲染区域，它是用于决定盒子布局及浮动相互影响的一个区域。BFC隔绝了内部与外部的联系，内部渲染不会影响到外部。不同的BFC区域，渲染时也互补干扰。

BFC主要能够解决以下问题
1.开启BFC之后，其子元素不会产生margin塌陷问题（不会和它的子元素产生margin合并）

2.开启BFC之后，就算子元素浮动自身高度也不会坍塌 （高度计算不再无视浮动元素）

3.开启BFC之后，自己不会被其他元素所覆盖（不会与浮动元素重叠，会避开浮动元素排布）

如何开启BFC

1.根元素（HTML)
2.设置float属性

3.设置position属性（属性值需要是absolute或fixed）

4.设置overflow属性（属性值不为visible即可）

5.行内块元素（inline-block）

6.设置display为flow-root的元素

7.伸缩项目（flex盒子内的item）

8.多列容器（设置column-count)

9.表格元素（table thead tbody tfoot tr th td caption)

10.column-span为all的元素（表格第一行横跨所有列）

最后需要我们注意的是：虽然开启BFC的方法很多，但是对于这些方法的使用还是需要结合具体的场景来确定。

针对于第一个问题为例：开启BFC之后，其子元素不会产生margin塌陷问题，以下是相关代码

    <div class="parent">

        <div class="child c1"></div>

        <div class="child c2"></div>

        <div class="child c3"></div>

    </div>

css：

未开启BFC前图

开启BFC后