老铁们，大家好，相信还有很多朋友对于bfc十大冷知识和bfc百科的相关问题不太懂，没关系，今天就由我来为大家分享分享bfc十大冷知识以及bfc百科的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

本文目录

1. BFc是什么意思
2. 油水分离器afc和bfc的区别
3. bfc优缺点
4. bfc规则特性

1规范中的一个概念。

2、BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

二、BFC的特点

1、具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三、BFC布局规则

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

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与floatbox重叠,而是紧贴浮动元素。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

四、哪些元素会产生BFC

1、根元素

2、float属性不为none

3、position为absolute或fixed

4、display为inline-block,table-cell,table-caption,flex,inline-flex

5、overflow不为visible

五、在布局中BFC的应用场景

（1）清除盒子垂直方向上外边距合并——盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

解决方法：

根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。

（2）在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。

油水分离器AFC和BFC之间的主要区别在于它们的型号和设计。

AFC油水分离器是一种二联件，包括一个过滤器和一个收集器。它采用的是先进的二级油水分离技术，能够高效地去除油污、沉淀物和重金属等杂质，同时能够自动排水，保持水质的清洁。这种油水分离器的优点在于能够适应较高的流量和压力，过滤效率高，维护简单，寿命长。

BFC油水分离器也是一种二联件，但它包括一个浮球阀和一个收集器。它采用的是传统的单级浮球阀技术，通过浮球阀的启闭来控制排水。这种油水分离器的优点在于结构简单，安装方便，成本较低。但它的缺点在于处理能力较小，容易受到流量和压力波动的影响，过滤效率也不如AFC油水分离器高。

因此，根据实际需求和使用条件，可以选择适合的油水分离器型号和品牌。如果需要处理高流量和高压的含油废水，AFC油水分离器可能更合适；如果需要简单经济的解决方案，BFC油水分离器可能更适合。同时，也需要注意选择正规的品牌和供应商，以确保产品的质量和性能。

1.bfc全称Blockformattingcontext，块级格式化上下文，字面理解就是一个独立渲染的区域，里面的内容不受外界的影响。

2.一般设置了浮动，绝对定位/固定定位、dispaly的值为inline-block、table-cell、flex…或者元素设置了overflow的值除visible的情况下会产生。

3.一般用于清除浮动、设置左边固定大小，右边自适应布局，margin之间的层叠问题。

4.缺点的话因为我没有找到其他文献，我猜是bfc应该会引起重排，消耗性能吧。

一，BFC产生规则

1、根标签(body)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、position的值为absolute或fixed

二，BFC的特性

1、垂直方向排列。（类似块级特性）

2、BFC内部每个内部标签都会与左边界相接触。（类似块级特性）

3、属于同一个BFC的两个块元素，垂直margin兄弟关系会折叠（正数以大值为准，有负数正常加减），父子关系会塌陷。

4、BFC区域不会与float的标签区域重叠。

5、浮动的标签也会被计算BFC高度。

6、BFC是独立容器，内部标签不会影响到外部标签

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！