display属性值对父元素高度的影响：inline-block与inline的差异
本文分析display属性设置为inline-block和inline时，对父元素高度的影响。
以下代码示例阐述了这一问题：
当 相反， 关键在于，元素的display属性为inline-block时，父元素的高度为30px；而当设置为inline时，父元素的高度为0px。 这源于行内元素和块级元素在渲染方式上的根本区别，以及它们对包含块的影响。 理解行框盒子和潜在的空白节点对于解释inline-block情况下父元素高度为30px至关重要。
inline-block元素生成一个行内块级盒子，兼具块级元素（可设置宽高）和行内元素（不独占一行）的特性。 即使内容为空，它仍占据父元素line-height定义的高度(30px)，从而影响父元素高度。inline元素不独占一行，其尺寸完全由内容决定。 空inline元素不占据任何空间，因此不会影响父元素高度，导致父元素高度为0。inline元素不创建新的块级格式化上下文(BFC)，而是参与行内格式化上下文(IFC)。IFC的特点是行内元素通常不会影响父元素高度，除非自身具有高度（例如设置了height属性或包含内容）。inline-block元素则会创建BFC，从而影响父元素的高度。 BFC和IFC的差异是理解此问题的核心，需要深入研究块级格式化上下文和行内格式化上下文的工作机制才能完全掌握。
