BFC（块级格式化上下文，用于清楚浮动，防止margin重

BFC：块级格式化上下文

是什么？

一块区域，一块拥有着自己的渲染规则的区域。只要为一个普通的元素添加BFC的特征属性（下面会讲BFC特征属性有哪些），就可以让其变为一个BFC。

BFC特征属性：

1. 根元素：<html/>

2. float：left、right

3. position：absolute、fixed

4. display：inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、grid、inline-grid

5. overflow：hidden、auto、scroll

6. contain：layout、content、paint

7. 多列容器（元素的column-count/column-width不为auto，包括column-count为1）

有什么作用？

BFC可以被看做是一个“隔离了的”独立容器，容器内的元素在布局上不会影响到外面的元素。因此，其作用主要有3个：

1. 避免外边距重叠

举例：两个拥有margin属性的div纵向排列时，二者border之间的距离为：两个div的margin属性较大的那个值，也就是较小的margin属性会被覆盖在下面。但是如果我们的目的就是让两个margin属性都显示，不被覆盖，这个时候就可以用到BFC。

做法：将两个div分别包裹在两个容器中，为这两个容器添加BFC特征属性，让这两个容器均变为BFC，那么在每个BFC中，div的margin属性均会显露出来，也就不会重合了

2. 清除浮动：

父元素father中嵌套一个子元素son，为子元素添加float：left属性。这个时候，父元素就会出现高度塌陷，视觉效果就是父元素变成了一条线，子元素跑到了父元素的外部，并没有被包裹在这个父元素中，即浮动导致的脱离文档流。

做法：为father添加BFC属性，就可以让son再次回到文档流

3. 阻止元素被浮动元素覆盖

两个相邻div：brother1和brother2，为brother1添加float：left属性。这个时候，brother1会覆盖在brother2上面，如果想让brother1位于brother左侧

做法：为brother2添加BFC特征属性，以触发正常元素的BFC属性

__________________________________________

下面是对第三种情况的解释，如果你也存在一些疑惑可以看一看，如果已经理解了，就可以忽略下面这段话。

细心的朋友可能已经发现了，不是说float：left就是BFC的特征元素吗？brother1既然已经是一个BFC了，那么就应该和他的兄弟自然分开（独立元素），为什么还需要为他的兄弟元素再去添加BFC的特征元素呢？

我是在网上搜集了一些博客和视频之后做出来的这些总结，但最后一个例子着实费解！

一番思索后，渐渐明白，BFC只是“让其内部”变成一个独立区域，即brother1就是一个BFC，它内部是一个独立空间，而brother2位于其外部。那么，为他的兄弟元素brother2加了BFC的特征元素后，那么他的内部也变成了一个独立空间，想了许久，突然觉醒！两个兄弟层面的独立空间，自然不就相互独立开了嘛。这时不就是第一个作用的例子。

float：left确实可以让其内部变成一个BFC。举个例子，不知道大家有没有注意过这样一种情况，前面有过这样一道题目：如何清除浮动？我在网上经过一番查阅后，就发现有人给出了这样的回答：为父元素添加float，就可以为其子元素清除浮动，我当时还很疑惑，且不管能不能清除浮动，为父元素添加了浮动，那父元素不也会脱离文档流，怎么办？难道再为其爷爷元素也添加个float？不过，看了BFC的一些解析后，确实理解了，BFC内是一个独立的空间，也就自然起到了清除浮动的效果，可是添加的不应该是float：left来为其子元素清除浮动，而应该是一些影响相对较小的特征元素，例如：overflow：hidden。其实每个特征元素对应形成的BFC也都具有自己的效果，浮动就是其一。

以上都是一些个人对结果的分析，如有问题，请及时纠正，谢谢！