bfc ifc

bfc=block formatting context（块级格式化上下文）
布局规则
- 1.bfc内部元素都会按照垂直方式来放
- 2.盒子在垂直方向上的margin值会重叠
- 3.内部盒子会以bfc的左边（右边）线接触，浮动也是这样
- 4.bfc区域不会与浮动盒子重叠
- 5.bfc环境中的子元素一外界分离，不会影响到外面的元素，而外面的元素也不会 影响到bfc里面的元素 
- 6.bfc中浮动元素会参与计算

bfc触发方式： float 值不为none position :abusolute,fixed; display: inline-block,table-cell,table-caption,flex,inline-flex overflow:不为visible\

ifc= inline formatting context（行级格式化上下文）
布局规则
- 1.ifc中的元素会在一行上从左到右排列
- 2.在一行上的所有元素会在该区域形成一个行框
- 3.行框的宽度为包含框的宽度，高度为行框中最高元素的高度
- 4.浮动的元素不会再行框中，并且浮动元素会压缩行框的宽度
- 5.行框的宽度容纳不下子元素时,子元素会换到下一行显示，并会产生新的行框
- 6.行框内的元素遵循text-align  和 vertical-align