BFC是个啥？

Posted 2020-12-06 huangzhenghaobky

BFC的定义

BFC到底是个啥呢？先贴出一段大佬们在分析BFC的时候字面上的理解：

在CSS布局中，是通过对一个个box的布局，来实现整体页面的布局，这一个个box也就是一个个容器元素，这些元素分为两类：块级元素(block)，行内元素(inline)。 对于不同类型的元素，有不同的处理规则，这个元素内部的子元素也会用不同方式去渲染

BFC中的FC为formatting context的首字母缩写，翻译过来就是“格式化上下文”，它是页面上的一个渲染区域，并有一套渲染规则，规定了它内部元素的渲染方式 ，而BFC就表示“块级格式化上下文”。对应的还有IFC,FFC,GFC等

我的理解就是：BFC是一种css渲染规则，规定了块级元素的渲染规则。运用了BFC渲染规则的元素是一个独立的渲染区域，和渲染规则，不会影响其他外部元素的布局

使用BFC规则后当前元素和内部元素表现

1. BFC内部的Box(块元素)会在垂直方向，一个接一个地放置
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。
4. BFC的区域不会与float元素区域发生重叠
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算(可以解决浮动元素的父元素高度塌陷问题)

生成BFC规则的方式（抄自MDN）

1. 根元素(html)默认生成一个BFC
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 paint 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

注：BFC包含创建它的元素内部的所有内容

BFC常用场景

一，解决浮动的父元素高度塌陷问题

I am a floated box!

I am content inside the container.

.box { background-color: pink; border: 2px solid skyblue; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }

子元素设置float后，父级元素高度塌陷了。根据上面提到的BFC元素在计算高度的时候，会算上其中的浮动元素的高度，所以上面例子中这种情况，可以设置父元素为BFC来解决：

I am a floated box!

I am content inside the container.

.box { background-color: pink; border: 2px solid skyblue; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }

二，解决margin重叠问题

one

two

.mar30{margin:30px;}

根据BFC的独立，不影响其他元素布局的特性，通过设置其中一个元素为BFC来解决：

one

two

.mar30{margin:30px;} .bfc{display:flow-root;}