BFC
概念
BFC全称Block Formatting Context ,中文直译为块级格式上下文
规则
1.BFC内的盒子会垂直排列，独占一行
2.BFC内的兄弟盒子margin垂直方向会发生重叠而不是叠加
3.BFC区域不会和浮动盒子重叠
4.BFC是独立容器，不会干扰外界亦不会为外界干扰
5.BFC能够识别并包含浮动元素，当计算区域高度时，浮动元素也可以参加计算
生成条件
1.float: left | right | inherit (不是none就行)
2.position: absolute | fixed
3 display: inline-block | flex | inline-flex | table-cell | table-caption
4.overflow: hidden | auto | scroll (不是visible)
作用
1 浮动引起的高度塌陷问题。
解决方式：为父元素设置overflow:hidden创建一个BFC区域，但解决浮动最好的方式还是添加clearfix类。
2.兄弟盒子间的margin-bottom和margin-top不会累加，而会重叠，即选取数值大的作为间距。
解决方式：为其中一个盒子设置display:inline-block再创建一个BFC即可解决。
3.子元素设置margin-top会带着父元素一起移动。
解决方式：为父盒子设置display:inline-block生成一个新的BFC。
IFC
概念
IFC全称Inline Formatting Contexts，中文直译为内联格式化上下文
规则
1.一个一个水平排放，不独占一行
2.水平的margin、padding、border有效，上下margin无效
3.宽高无效
4.行宽由含块和存在的浮动绝对
作用
多元素的垂直居中
解决方式：为每个元素设置vertical-align: middle
