谈谈BFC

目录

一、BFC（Block Formatting Context）

二、在什么情况下形成BFC（包含不限于）

三、BFC空间中的盒子渲染规则（包含不限于）

四、应用场景

---

一、BFC（Block Formatting Context）

      BFC（Block Formatting Context）：格式化上下文，是Web页面中块级盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

     盒子分为标准流盒子和非标准流盒子（浮动、定位），添加BFC后的盒子是标准流的盒子。

     以下遇到的现象便和BFC有关：

1、当父盒子中的所有子盒子脱离标准流后高度变成0px

2、两个标准流（或者同时添加float:left浮动）盒子添加margin属性，距离不是两个值之和而是较大值作为两个盒子的距离

3、浮动盒子会覆盖标准流盒子，而想让浮动盒子不覆盖标准流盒子，且存在一定间距

4、给子盒子添加margin值，动的是父盒子距离

二、在什么情况下形成BFC（包含不限于）

1、HTML标签包裹的空间

2、为盒子添加一下任一样式：

【1】float 添加除了none以外的值

【2】position 添加absolute | fixed

【3】display 添加inline-block | table-cell | table-caption | column-span | flow-root(css3规范)等

【4】overflow 添加除了visible以外的属性

三、BFC空间中的盒子渲染规则（包含不限于）

1、在BFC盒子布局中，元素按照先后顺序自上而下布局，行内、行内块元素一行显示知道把当行占满然后换行，块级元素自占一行；默认都是标准流 

2、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此   

2、盒子上下的距离是由margin决定的，

3、margin值会出现重合的现象

4、标准流不会被脱离标准流的盒子覆盖

5、父盒子会将浮动的子盒子的高度参与计算

6、父盒子添加BFC，直系子盒子也添加BFC，该子盒子还是会收到父盒子的影响，但是子盒子里的孙盒子不会再受到爷爷盒子的影响了

四、应用场景

1、两个标准流（或者同时添加float:left浮动）盒子添加margin属性，距离不是两个值之和而是较大值作为两个盒子的距离

BFC：

 如何让盒子上下的距离是两个margin值之和？

让两个盒子任一一个盒子成为BFC里面的盒子，以不受外部盒子的影响。