BFC（块级格式化上下文）与IFC（行级格式化上下文）学习笔记

BFC

1.BFC是什么？

BFC的全称为  Block Formatting Context  , 也就是块级格式化上下文。BFC 决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用 当涉及到可视化布局时，Block Formatting Context 提供了一个环境， HTML 在这个环境中按照一定的规则进行布局。BFC是一个独立的空间，这样使得BFC里面的子元素不会影响到外面的布局。

2.BFC的触发条件

当我们使用一些css属性的时候，就会触发BFC，主要有以下几条：

overflow: hidden；

display: inline-block；

position: absolute；

position: fixed；

display: flex

3.BFC的特性

（1）BFC可以解决因使用float而导致的高度塌陷问题

当我们使用float时，常常会产生高度塌陷问题，此时我们可以给发生高度塌陷的父元素加上上面的几个css属性，触发块级格式化上下文，撑起父元素的高度。

（2）BFC可以解决外边距Margin重叠的问题

当我们将两个盒子上下放置时，两个盒子的距离为两者之中最大的那个外边距，这就是margin塌陷问题。为了解决这一问题。我们可以用到BFC，使用过后两个盒子的距离为两者的外边距之和。

IFC

1.IFC是什么？

IFC的全称为  Inline Formatting Context  , 也就是行级格式化上下文。

2.IFC的触发条件

块级元素中仅包含内联级别元素形成条件很简单，当IFC中有块级元素插入时。会产生两个匿名块将父元素分割，产生两个IFC 当IFC。

3.IFC的特性

（1）在IFC中，子元素水平横向排列，且只计算横向的样式空间。

（2）当外层元素为inline-block时，可以使用text-align使元素水平居中，使用vertical-align使元素垂直居中