BFC规则，以及解决的问题

什么是bfc？

bfc（block formatting centext） 直译为“块级格式化范围”。
它是w3c 规范中的一个概念，他决定了元素如何对其内容进行定位，以及与其他元素的关系和相对定位。当涉及到可视化布局的时候，bfc这时提供了一个环境，html元素在这个元素中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

bfc规则：

1.内部的box会在垂直方向，一个接一个的放置。.
2.box垂直方向的距离由margin决定。属于同一个bfc的两个相邻的盒子会发生重叠。
3。每个元素的margin box的左边，与包含块border box的左边相接触，（对于从左往右的格式化，对于从右到左的格式化，右外边接触右边。）
）存在浮动也是如此。
4。bfc的区域不会与float box重叠。
5. bfc就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。外面的也同样不会影响到内部。
6. 计算bfc的高度时，浮动也参与计算。

创建bfc

float 的值不为none
position 的值不是static或者relative
display的值是 inline-block、table-caption、flex、table-caption 或者inline-flex
overflow 的值不是visible

bfc应用

清除浮动的影响。
计算父盒子 overflow：hidden；

防止margin塌陷
其中一个盒子加父盒子，父盒子身上加overflow：hidden
图文环绕。（两列自适应）
图浮动，在文字的盒子上 overflow：hidden；