清除浮动与BFC容器

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

父元素塌陷

因为浮动定位不属于正常的页面流，所以当子元素都是浮动元素时，非浮动的父容器在显示时不会考虑子元素的位置，这样子父元素就会出现坍塌的现象。

解决方法：清除浮动

方式1 ：在同级后续的元素上使用clear属性
方式2 ：父元素结束之前插入清除浮动的块级元素
方式3 ：给父元素增加一个伪元素 在伪元素上做clear操作
方式4 ：把父容器设置成BFC容器，BFC容器让 浮动的元素的高度 也能算入父容器中

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

根据W3C的标准，在页面中所有元素都有一个隐晦的属性叫Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是被关闭的 当BFC被打开后，该元素会拥有以下这些特性：

1. 计算BFC容器的高度时，浮动元素也参与计算
2. BFC是页面上的一个隔离的独立容器
3. BFC可以用来解决margin的重叠特性带来的问题

总的来说，BFC就像在页面上额外制造了一个封闭的大箱子，在这个箱子里的元素不管怎么翻天覆地都无法影响外部的元素，借此我们就可以达到清除浮动与塌陷的目的。

创建条件

1. 将overflow的值改为 auto、hidden、overlay、scroll
2. 浮动（元素float的值不为none）
3. 绝对定位（absolute、fixed）
4. 行内块级（inline-block）
5. 表格单元 （display：table-cell）
6. 弹性盒子（flex、inline-flex）

需要注意的亿点

BFC在MDN中有这么一段描述：BFC包含创建该上下文元素的所有子元素，但不包含创建了新BFC的子元素的内部元素。 也就是说，一个Div容器一旦被创建为BFC容器，那么他就会作用于所有子元素。一个A容器，里面还有b，还有c，还有d、e、f，只要A容器被设定为BFC容器，那么A容器里的所有元素都处在BFC的环境下了，就都要满足BFC的特点。