inline和inline-block元素对父元素高度的影响差异
本文分析了元素display属性设置为inline和inline-block时，父元素高度不同的原因。 文中以一个简单的HTML代码片段为例：
当 这其中的关键在于行内格式上下文 (IFC) 和块格式上下文 (BFC) 的区别。 inline-block与BFC: inline与IFC: 理解IFC和BFC的特性是解决这个问题的关键。 深入了解这两个概念，就能清晰地解释元素的display属性为inline-block时，父元素的高度为30px；而当display属性为inline时，的高度为0px。
inline-block元素会创建BFC，而inline元素则参与IFC。
inline-block元素即使内容为空，也会占据一定的空间，影响父元素的高度。line-height属性定义了行框的高度，BFC会尊重这个高度，因此父元素高度为30px。inline元素参与IFC，本身不会占据任何垂直空间。即使设置了父元素的line-height，由于inline元素没有内容，不会产生高度，所以父元素高度为0。IFC与BFC在高度处理上的差异是造成结果不同的根本原因。 只有非空行内元素才会影响父元素高度，空行内元素不会。inline和inline-block对父元素高度产生的显著差异。
