嵌套元素对父元素高度的影响
在 css 中，span 元素的 display 属性可以设为 inline-block 或 inline，这会影响其父元素的高度。以下是一段代码示例：
- 当 span 的 display 为 inline-block 时，div 的高度为 30px。
- 当 span 的 display 为 inline 时，div 的高度为 0。
原因
原因在于块级格式化上下文 (bfc) 和内联格式化上下文 (ifc) 的区别。
立即学习“前端免费学习笔记（深入）”；
- 当 span 的 display 为 inline-block 时，它会创建自己的 bfc，并且不会影响其父元素的高度。
- 当 span 的 display 为 inline 时，它不会创建 bfc，并且会被视为其父元素内容的一部分。由于 div 没有任何其他内容，所以其高度为 0。
参考
- [why empty display inline block element create height but display inline and display block not?](https://stackoverflow.com/questions/15428710/why-empty-display-inline-block-element-create-height-but-display-inline-and-displa)
- [how to determine height of content-box of a block and inline element](https://stackoverflow.com/questions/14371045/html-how-to-determine-height-of-content-box-of-a-block-and-inline-element)
