# BFC 和 IFC

# BFC 是什么

BFC(block formatting context)块级格式化上下文

# BFC 布局规则

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

2)box 垂直方向由 Margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。

3)每个元素的 margin box 的左边，与包含块 border box 的左边相接触。

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

5)BFC 就是页面上的一个隔离容器，容器里的子元素不会影响外面的元素。

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

# 会生成 BFC 的元素

根元素

float 属性不为 none

position 为 absolute 或 fixed

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

overflow 不为 visible

# BFC 作用

自适应两栏布局

清除内部浮动

防止垂直 margin 重叠

# IFC 是什么

IFC(Inline Formatting Contexts)内联格式化上下文

# IFC 布局规则

1)子元素水平方向横向排列，并且垂直方向起点为元素顶部

2)子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】

3)在垂直方向上，子元素会以不同形式来对齐（vertical-align）

4)float 元素优先排列

# IFC 作用

解决元素垂直居中

多个文本元素行高不一致排列混乱