嵌套元素对父元素高度的影响
在
css
中，span 元素的 display 属性可以设为 inline-block 或 inline，这会影响其父元素的高度。以下是一段代码示例：
当 span 的 display 为 inline-block 时，div 的高度为 30px。
当 span 的 display 为 inline 时，div 的高度为 0。
原因
原因在于块级格式化上下文 (bfc) 和内联格式化上下文 (ifc) 的区别。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
当 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://stack
overflow
.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)