BFC、IFC概念的布局规则、形成方法、用处

1. BFC-块级格式化上下文（Block Formatting Context）
2. IFC-行内格式化上下文（Inline Formatting Context）
3. FFC-弹性格式化上下文（Flex Formatting Context）
4. GFC-网格布局格式化上下文（GridLayout Formatting Context）
   三、什么是BFC
   快格式上下文是web页面可视css渲染的一部分，是块盒子的布局过程发生的区域。
   简单的说，BFC就是一个建立了新的块格式上下文的块容器中的渲染区域。是一个可用来维持内部浮动、排除外部浮动和抑制边距折叠的框。
   四、怎么创建一个BFC(形成方法)
   下列方式会创建块格式化上下文：
   ● 根元素(html)
   ● 浮动元素（元素的float不是none）
   ● 绝对定位元素（元素的position为absolute或fixed）
   ● 行内块元素（元素的display为inline-block）
   ● overflow值不为visible的块元素
   ● 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
   ● 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
   ● 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table）
   ● display至为flow-root的元素
   ● contain值为layout、content或paint的元素
   ● 弹性元素（display为flex或inline-flex元素的直接子元素）
   ● 网格元素（display为grid或inline-grid元素的直接子元素）
   ● 多列容器（元素的column-count或column-width不为auto，包括column-count为1）
   ● column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

简单来说：浮动、绝对定位元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及“溢出”不是“可见”的块框，为其内容建立新的快格式上下文。
块格式化上下文对浮动定位、清楚浮动都很重要。浮动定位和清楚浮动时只会应用于同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清楚浮动只能清除同一BFC中在它前面元素的浮动。外边距折叠也只会发生在属于同一个BFC的块级元素之间。
五、BFC的约束规则（布局规则）
可以归纳为：
1、内部的盒子会在垂直方向一个接一个排列。
2、两个同级盒之间的垂直距离由margin属性决定。同一个块格式上下文中相邻块级盒之间的垂直边距折叠。
3、每个盒子的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘），除非盒子建立了新的块格式化上下文。
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，容器外的元素同样不会影响到里面的元素。
5、计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
6、float的元素区域不会覆盖其他BFC的区域。

六、BFC用处
1、可以避免外边距重叠
场景：块的上外边距margin-top和下外边距margin-bottom会合并为单个边距。

使用BFC进行解决：
为container添加overflow：hidden

2、清除浮动
场景：希望看到的是一圈红色的边框包裹着一个蓝色的方块，但是并不是这样的，因为我们为子元素添加了浮动，只剩下2px的边框的高度。

解决方法：

为父容器添加overflow：hidden属性，使父容器包裹子容器，达到清除浮动的效果。
3、阻止元素被浮动元素覆盖
场景：定义两个div，一个设置浮动，一个不设置，浮动的div会将另一个div给覆盖掉。

解决方法：

给第二个div设置overflow：hidden，这样两个元素就不会相互干扰了。
六、IFC（Inline formatting context）
1、什么是IFC
行内格式化上下文是一个网页的渲染结果的一部分。IFC由只包含行内级盒子的的块容器建立，各行内盒子一个接一个地排列，其排列顺序根据书写的设置来决定。

• 对于水平书写模式，各个盒子从左边开始水平地排列
• 对于垂直书写模式，各个盒子从顶部开始垂直地排列

2、行盒（line box）
包含来自同一行的盒矩形区域叫做行盒

• line box 的宽度由包含块和float情况决定，一般来说，line box的宽度等于包含块两边之间的宽度。然而float可以插入到包含块和行盒之间，如果有float，那么line box 的宽度会比没有float时小。
• line box的高度由line-height决定，而line box之间的高度各不相同
• line box的高度能够容纳它包含的所有盒，当盒的高度小于行的高度时，盒的垂直对齐方式由vertical-align属性决定。
  3、 形成IFC条件：
  1、font-size
  2、line-height
  3、height
  4、vertical-aligin

4、IFC特性

• IFC的元素会在一行中从左至右排列
• 在一行上的所有元素会在该区域形成一个框
• 行宽的高度为包含框的高度，高度为行框中最高元素的高度，浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
• 行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框的元素内遵循text-align和vertical-align