EFC

Posted 2020-10-12 张萤莹

一、BFC

1、Box:盒模型（bloack块盒、inline行盒）

2、FC：Formatting Context 格式化上下文

3、Format，Formatting 格式化

4、IFC：inline Formatting Context 直译：行级格式化上下文

5、BFC：Block Formatting Context 直译：块级格式化上下文

 

 

二、BFC定义：

1、页面中CSS渲染的一个部分（区域）。

2、主要是用于“决定”盒子的布局以及浮动（相互影响的范围）的一个“区域”。

3、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后，BFC的布局规则：

1、内部的块级元素在垂直方向上，一个接一个的放置。

2、块级元素垂直方向Margin重叠，取最大值。（同一个BFC中的两个相邻元素）

3、每个元素的Margin box的左边，与包含块的border box的左边相接触（即使是浮动也是如此）

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

5、BFC是一个独立的区域（容器），容器里面的子元素不会影响外面的元素。

6、计算BFC的高度时，浮动元素也要参与计算。